把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 相关文章推荐
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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 变量未定义等错误的解决方法
2011/01/12 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
php实现微信支付之退款功能
2018/05/30 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
公司门卫管理制度
2014/02/01 职场文书
人事任命书范文
2014/06/04 职场文书
转让协议书
2015/01/27 职场文书
2015年质检工作总结
2015/05/04 职场文书
民事代理词范文
2015/05/25 职场文书