把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入门教程(1) 什么是JS
Jan 31 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue引用外部JS的两种种方法
Jan 28 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
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery大于号(>)选择器的作用解释
2015/01/13 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python列表切片操作实例总结
2019/02/19 Python
python gdal安装与简单使用
2019/08/01 Python
Python 私有化操作实例分析
2019/11/21 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
电气自动化专业职业规划范文
2014/02/16 职场文书
岗位明星事迹材料
2014/05/18 职场文书
外联部演讲稿
2014/05/24 职场文书
社区志愿者活动方案
2014/08/18 职场文书
关于教师节的广播稿
2014/09/10 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android