Centos7下Vue.js项目部署文档

一.node pm2 环境配置

1.使用服务器下载nodejs

//如果没安装wget则安装
yum install wget
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环境配置

最好不要在/root目录下安装，因为普通用户没有/root目录的访问权限的，继而无法执行安装在/root目录下的软件，可以将node的文件夹复制到别的路径下，如：/usr/local/node 等，再做后续的操作

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

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

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

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

4.全局安装pm2

npm install pm2 -g

5.创建pm2链接

sudo ln -s /usr/local/nodejs/lib/node_modules/pm2 /usr/local/bin/pm2

二.项目打包

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

三.写一个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

六、服务启动

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

pm2的其他一些命令

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

七、其他一些事宜

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

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

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

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

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