把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 使用技巧精萃(.net html
Apr 25 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
js实现盒子移动动画效果
Aug 09 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
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
Openlayers实现地图的基本操作
2020/09/28 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python进阶篇之字典操作总结
2016/11/16 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
超级实用的8个Python列表技巧
2020/08/24 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
护理学毕业生求职信
2013/11/14 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
经典安踏广告词
2014/03/21 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang