把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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
JavaScript中的闭包
Feb 24 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
浅谈在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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP简单日历实现方法
2016/07/20 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
原生JS实现瀑布流插件
2018/02/06 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python中黄金分割法实现方法
2015/05/06 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript