把vue-router和express项目部署到服务器的方法


Posted in Javascript onFebruary 21, 2018

- 首先确定此项目在本地能够运行成功

在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000

有写的路由为/的页面,如图

把vue-router和express项目部署到服务器的方法

此为文件层级关系

front为前端文件

xk3为后台express与数据库mysql链接的文件

用命令行进入后台并且运行,启动成功

把vue-router和express项目部署到服务器的方法

这是路径为/的页面

把vue-router和express项目部署到服务器的方法

在浏览器中输入路径http://localhost:3000/

浏览器中显示WelCome to express

至此此项目在本地运行成功,我们现在就要放到服务器上。

- 准备工作

此前服务器的基本设置就不再赘述。

打开xftp或者其他类似软件,将此项目全部复制到/var/www/路径下

(此路径可能会不一样,就是服务器网页的路径)

把vue-router和express项目部署到服务器的方法

将后台所需要的数据导入服务器的数据库中,命令为mysql>source “路径”;

然后打开xshell并进入此项目后台,类似于在本地运行后台文件,前提是你的服务器上安装了node,mysql等基本配置,自行百度,还有一个问题就是确定你的vue-router中的路由获取的是服务器的ip+port+router,例如var url = ‘http://47.95.7.109:3000/course/batchDelete‘,还要从阿里云的安全组配置那里打开你的3000端口,不然访问会被阻止。

把vue-router和express项目部署到服务器的方法

我的运行失败是因为我之后用了forever守护进程,一直在占用3000端口,所以无法启动,如果没有设置过的话能够正常启动就和在本地一样。

以我的学生选课系统为例截图

把vue-router和express项目部署到服务器的方法

但是这样你的服务器就一直处于阻塞状态,只要断开链接,服务也会中断。

创建守护进程

接下来就是用pm2或者forever创建守护进程,经过亲测,感觉forever比较简单,只需要几行命令,并不需要额外配置。

即开始使用forever

1.sudo npm install forever -g

2.forever start app.js

3.forever start -l forever.log app.js

这是我出现了一个错误,是没有指定错误和输出的日志文件

提示错误为:log file /root/.forever/forever.log exists. Use the -a or ?append option to append log.

4.解决方案

forever start -a -l forever.log -o out.log -e err.log app.js(app.js就是后台的入口文件)

如果还是不行可使用

forever start -a -l forever.log -o out.log -e err.log ./bin/www

此时node项目部署完成,就算关闭服务器的后台服务也能正常运行,不需要阻塞。

运行成功图片

把vue-router和express项目部署到服务器的方法

如果其中有问题,请提出,谢谢!

样本链接:http://47.95.7.109/student/work/front/#/

以上这篇把vue-router和express项目部署到服务器的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
RequireJS用法简单示例
Aug 20 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
You might like
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
js事件触发操作实例分析
2019/06/21 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
详细介绍Ruby中的正则表达式
2015/04/10 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
用Python制作音乐海报
2021/01/26 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书