Centos7下Vue.js项目部署文档

一.node pm2 环境配置

1.使用服务器下载nodejs

sudo yum -y update
sudo yum -y wget
//在官网选择需要下载的版本
sudo wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz

2.node npm环境配置

//解压到当前目录
sudo tar -xvf node-v8.12.0-linux-x64.tar.xz

//改目录名
sudo mv node-v8.12.0-linux-x64 nodejs

//创建链接
sudo ln -s /home/bin/node /usr/local/bin/node  
sudo ln -s /home/bin/npm /usr/local/bin/npm

3.运行node -v，npm -v查看版本，正确则node npm环境无误

4.全局安装pm2

npm install pm2 -g

5.创建pm2链接

sudo ln -s /home/bin/pm2 /usr/local/bin/pm2

二.项目打包
vue项目中使用npm run build命令进行打包，生成一个manage目录（默认为dist目录，可修改），这个文件夹就是我们要部署上线的项目。

打包好的文件目录如下：

微信图片_20190115153955.png

三.写一个node启动脚本

主要做的事情是读取目录下的单页面文件(index.js)，监听8002端口。

const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, './manage')))

app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './manage/index.html'), 'utf-8')
    res.send(html)
})

app.listen(8002);

四.生成package.json文件

由于app.js启动脚本使用了express框架，我们可以生成一个package.json文件，将express依赖添加进去。

{
  "name": "back_manage",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3"
  }
}

五.文件上传

服务器上新建一个文件夹，将vue项目打包文件、app.js启动脚本、package.json配置文件，上传至该文件夹下，注意：三个文件是同级的。

在该文件夹下安装依赖

npm install

安装依赖完成后的项目结构如下：

微信图片_20190115155348.png

六、服务启动

登陆到你的服务端,cd到项目文件夹，使用pm2 start app.js就成功启动服务了

微信图片_20190115155640.png

pm2的其他一些命令

pm2 show 0（id）//查看某个启动的应用详情
pm2 show list//查看当前启动的所有应用
pm2 stop 0(id)//关闭某个应用

七、其他一些事宜

1、端口的开放：如上该单页面应用监听端口8002，需要将8002端口开放出来，可能涉及到iptables、firewall、阿里云安全组等等，具体方法已在另一份部署文档中详细介绍，此处就不一一赘述。

2、做好以上操作后，理论上可以通过ip+端口在浏览器中查看到项目页面，但实际上第一次访问的时候界面如下：页面空白，找不到资源

微信图片_20190115160434.png

然后百度找了原因，修改了一处地方：修改 assetsPublicPath

在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点

assetsPublicPath: '/',变成assetsPublicPath: './'，项目重新打包。

重启服务后，浏览器端访问如下：

微信图片_20190115160806.png

（备注：如果前后端部署在不同的服务器上，或者要使用域名访问，需要加入nginx。本项目前后端部署在同一台服务器上，暂不考虑）