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

 更新时间:2018年02月21日 22:06:54   作者:李小斌96  
下面小编就为大家分享一篇把vue-router和express项目部署到服务器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

此为文件层级关系

front为前端文件

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

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

这是路径为/的页面

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

浏览器中显示WelCome to express

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

- 准备工作

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

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

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

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

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

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

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

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

创建守护进程

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

运行成功图片

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

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

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

相关文章

  • Vue计算属性的使用

    Vue计算属性的使用

    本篇文章主要介绍了Vue计算属性的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue3+Element-plus项目自动导入报错的解决方案

    Vue3+Element-plus项目自动导入报错的解决方案

    vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于Vue3+Element-plus项目自动导入报错的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue数字输入框组件的使用方法

    Vue数字输入框组件的使用方法

    这篇文章主要为大家详细介绍了Vue数字输入框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 详解Vue2和Vue3的区别以及其钩子函数的使用

    详解Vue2和Vue3的区别以及其钩子函数的使用

    Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧
    2024-01-01
  • Vue.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定,如何在表单控件元素上创建双向数据绑定,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue实现打印功能的示例代码

    vue实现打印功能的示例代码

    这篇文章主要为大家详细介绍了如何通过vue实现打印功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • iphone刘海屏页面适配方法

    iphone刘海屏页面适配方法

    这篇文章主要介绍了iphone刘海屏页面适配方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 利用Vue3+Element Plus封装公共表格组件(带源码)

    利用Vue3+Element Plus封装公共表格组件(带源码)

    最近公司项目中频繁会使用到table表格,而且前端技术这一块也用到了vue3来开发,所以基于element plus table做了一个二次封装的组件,这篇文章主要给大家介绍了关于利用Vue3+Element Plus封装公共表格组件的相关资料,需要的朋友可以参考下
    2023-11-11
  • 使用Vite处理css less及postcss示例详解

    使用Vite处理css less及postcss示例详解

    这篇文章主要为大家介绍了使用Vite处理css less及postcss的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue项目中更改名字和图标的简单实现步骤

    vue项目中更改名字和图标的简单实现步骤

    今天在写vue项目时碰到的问题是怎么修改vue的网页图标,所以下面这篇文章主要给大家介绍了关于vue项目中更改名字和图标的简单实现,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论