把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 流畅动画实现原理
Sep 08 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
layui实现数据表格自定义数据项
Oct 26 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP 输出缓存详解
2009/06/20 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS交换变量的方法
2015/01/21 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
浏览器兼容性问题大汇总
2015/12/17 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2016年会开场白台词
2015/06/01 职场文书
导游词之千岛湖
2019/09/23 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
Redis 哨兵集群的实现
2021/06/18 Redis
Linux系统下安装PHP7.3版本
2021/06/26 PHP