把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的温度计动画效果
Jun 18 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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文件怎么打开 如何执行php文件
2011/12/21 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
详解vue的双向绑定原理及实现
2019/05/05 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python实现图片转字符画的示例
2017/08/22 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Python中six模块基础用法
2019/12/08 Python
Django多数据库联用实现方法解析
2020/11/12 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
公司年会搞笑主持词
2014/03/24 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
学雷锋倡议书
2015/01/19 职场文书
内勤岗位职责范本
2015/04/13 职场文书
暂住证明怎么写
2015/06/19 职场文书
大学开学感言
2015/08/01 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
零基础学java之循环语句的使用
2022/04/10 Java/Android