把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 ajax abort()的使用方法
Oct 28 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
Vue.js动态组件解析
Sep 09 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php中关于换行的实例写法
2019/09/26 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
Python中的hypot()方法使用简介
2015/05/18 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python骚操作之动态定义函数
2019/03/26 Python
python 实现绘制整齐的表格
2019/11/18 Python
结构工程研究生求职信
2013/10/13 职场文书
党员党性分析材料
2014/02/17 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技