把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.js项目部署到服务器的详细步骤
  • vue 打包后的文件部署到express服务器上的方法
  • Vue 项目部署到服务器的问题解决方法
  • Vue应用部署到服务器的正确方式
  • Vue项目webpack打包部署到服务器的实例详解
赞 (0)

相关推荐

  • Vue 项目部署到服务器的问题解决方法

    Vue 项目部署到服务器的问题解决方法

    相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • Vue应用部署到服务器的正确方式

    Vue应用部署到服务器的正确方式

    本文介绍了Vue应用部署到服务器,分享给大家,希望此文章对各位有所帮助. 很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后,会发现或多或少的问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-C

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

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

    - 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000 有写的路由为/的页面,如图 此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行,启动成功 这是路径为/的页面 在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功,我们现在就要放到服务器上. - 准备工作 此前服务器

  • vue、react等单页面项目部署到服务器的方法及vue和react的区别

    vue、react等单页面项目部署到服务器的方法及vue和react的区别

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

  • 多个Vue项目部署到服务器的步骤记录

    一.业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二.部署 (1)首先在本地测试项目可以启动并且能正常运行. (2)在项目中输入npm run build 此时会生成一个文件 (3)在服务器上安装Nginx,并将admin-web上传到服务器. 我上传的位置: (4)修改Nginx文件,找到nginx.conf  三.如果此时有多个vue项目呢? 多加几个location即可 四.最后记得保存 :wq 五.重新启动Nginx sys

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • 将VUE项目部署到服务器的详细步骤

    将VUE项目部署到服务器的详细步骤

    目录 一.idea中vue项目的打包 1.设置打包后项目的名称 2.将项目打包 3.生成的包内的文件如下: 二.部署到服务器 1.找到Nginx的安装位置 2. 将打包后的vue项目文件放在html文件架下面 3.将打包后的文件夹上传至html文件夹 4.配置打开页面的路径 三.用IP地址访问 总结 宝塔面板上操作 一.idea中vue项目的打包 1.设置打包后项目的名称 publicPath:process.env.NODE_ENV === 'production' ? '/back/' :'

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

随机推荐