把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判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解JS中的attribute属性
Apr 25 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP strripos函数用法总结
2019/02/11 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python正则中最短匹配实现代码
2018/01/16 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
报关员个人职业生涯规划书
2014/03/12 职场文书
大二学习计划书范文
2014/04/27 职场文书
学生安全责任书范本
2014/07/24 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
计划生育个人总结
2015/03/02 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers