≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > vue.js

把vue-router和express项目部署到服务器的方法

人气:431 时间:2019-04-09

这篇文章主要为大家详细介绍了把vue-router和express项目部署到服务器的方法,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!

- 首先确定此项目在本地能够运行成功

在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000

有写的路由为/的页面,如图

【q1010.com温馨提示:图片暂缺】

 

此为文件层级关系

 

front为前端文件

xk3为后台express与数据库mysql链接的文件

用命令行进入后台并且运行,启动成功

【q1010.com温馨提示:图片暂缺】

这是路径为/的页面

【q1010.com温馨提示:图片暂缺】

在浏览器中输入路径http://localhost:3000/

浏览器中显示WelCome to express

至此此项目在本地运行成功,我们现在就要放到服务器上。

 

- 准备工作

 

此前服务器的基本设置就不再赘述。

打开xftp或者其他类似软件,将此项目全部复制到/var/www/路径下

(此路径可能会不一样,就是服务器网页的路径)

【q1010.com温馨提示:图片暂缺】

将后台所需要的数据导入服务器的数据库中,命令为mysql>source “路径”;

然后打开xshell并进入此项目后台,类似于在本地运行后台文件,前提是你的服务器上安装了node,mysql等基本配置,自行百度,还有一个问题就是确定你的vue-router中的路由获取的是服务器的ip+port+router,例如var url = ‘http://47.95.7.109:3000/course/batchDelete‘,还要从阿里云的安全组配置那里打开你的3000端口,不然访问会被阻止。

【q1010.com温馨提示:图片暂缺】

我的运行失败是因为我之后用了forever守护进程,一直在占用3000端口,所以无法启动,如果没有设置过的话能够正常启动就和在本地一样。

 

以我的学生选课系统为例截图

 

【q1010.com温馨提示:图片暂缺】

但是这样你的服务器就一直处于阻塞状态,只要断开链接,服务也会中断。

 

创建守护进程

 

接下来就是用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项目部署完成,就算关闭服务器的后台服务也能正常运行,不需要阻塞。

 

运行成功图片

 

【q1010.com温馨提示:图片暂缺】

如果其中有问题,请提出,谢谢!

样本链接:http://47.95.7.109/student/work/front/#/

以上这篇把vue-router和express项目部署到服务器的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。

本文来自:http://www.q1010.com/184/4632-0.html

注:关于把vue-router和express项目部署到服务器的方法的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。

关键词:vue.js

您可能感兴趣的文章

  • Vue+webpack项目基础配置教程
  • nginx+vue.js实现前后端分离的示例代码
  • 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
  • 图文介绍Vue父组件向子组件传值
  • Vue底层实现原理总结
  • Vue 2.5.2下axios + express 本地请求404的解决方法
  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)
  • Vue组件库发布到npm分析
  • 利用angular、react和vue实现相同的面试题组件
  • vue webpack打包优化操作技巧
上一篇:vue和react等项目中更简单的实现展开收起更多等效果示例
下一篇:Vue 2.5.2下axios + express 本地请求404的解决方法
热门文章
  • Vue 报错TypeError: this.$set is not a function 的解决方法
  • vue实现动态添加数据滚动条自动滚动到底部的示例代码
  • vue项目设置scrollTop不起作用(总结)
  • vue项目中使用vue-i18n报错的解决方法
  • iview实现select tree树形下拉框的示例代码
  • 分析关于element级联选择器数据回显问题
  • vue项目打包后打开页面空白解决办法
  • 解决element ui select下拉框不回显数据问题的解决
  • element-ui table span-method(行合并)的实现代码
  • element-ui 设置菜单栏展开的方法
  • 最新文章
    • 理解vue ssr原理并自己搭建简单的ssr框架
    • vue favicon设置以及动态修改favicon的方法
    • vue-router启用history模式下的开发及非根目录部署方法
    • 从零开始在NPM上发布一个Vue组件的方法步骤
    • Element input树型下拉框的实现代码
    • Vue 报错TypeError: this.$set is not a function 的解决方法
    • Vue.js组件高级特性实例分析
    • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
    • 分析Vue.js自定义tipOnce指令用法实例
    • 浅谈vuex actions和mutation的异曲同工

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。