用pm2 来管理vue的部署，用nginx来做服务器反向代理。
pm2是一个内置负载均衡的node进程管理器；
nginx做反向代理的作用是隐藏vue服务的真实ip地址。
通用的项目目录结构
搭建pm2+vue
因为pm2是基于服务来管理的，所以我们需要一个在webpack构建好的静态文件夹上（一般是dist/）搭建一个node服务，这里我们用express来搭建node服务。
- 在项目根目录添加app.js文件。
// app.js
const fs = require('fs');
const path = require('path');
const express = require('express');
const chalk = require('chalk')
const app = express();
app.use(express.static(path.resolve(__dirname, './dist')))
app.get('*', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
res.send(html)
})
app.listen(8082, res => {
console.log(chalk.yellow('Start Service On 8082'));
});
这样在根目录终端下运行node app.js就可以搭建一个以dist为根路径的node服务了（这里要确保安装了代码中的依赖插件）。
- 接下来就可以用pm2来管理node服务了。
首先，需要全局安装pm2.
// 这里要注意，经测试，在win10上安装pm2跑不起来
npm install pm2 -g
然后到项目根目录下运行：
// 这里pm2的具体用法可以自行百度
pm2 start app.js --name my-vue
这样node服务就可以用pm2进行操作了，查看pm2管理的项目。
linux下运行pm2 ps查看当前管理的项目
pm2上可以管理多个node服务，可以使用pm2 show [ id | name ]查看指定项目的详细信息。
使用nginx代理服务
使用nginx来代理的话，分两种情况：
一种是直接使用根域名来访问项目，例如www.abc.com/。这种比较简单，只需要在nginx里面进行/根路径的代理就行了。
// conf/nginx.conf文件
server {
listen 80;
server_name www.abc.com;
// 下面代表80端口下所有请求都代理到8082端口上。
location / {
proxy_pass http://127.0.0.1:8082/;
}
}
nginx上这样配置之后，我们在浏览器输入www.abc.com就能访问到我们服务器上8082端口上的服务（此处为我们上面的node服务）了。
另一种情况比较复杂一些，使用nginx配置子目录代理多个服务。
假设这样一个场景，我们现在只有一个域名，在上面还要部署多个服务，所以我们没办法在根域名下部署我们的项目，我们只能通过www.abc.com/my-vue来访问我们的node服务。这时候我们除了要修改nginx上的配置，还要对项目中某些文件进行修改。
- nginx的配置修改
// conf/nginx.conf
server {
listen 80;
server_name www.abc.com;
// 跟上面的配置差不多，只是location后面的内容变成了子目录路径/my-vue/
location /my-vue/ {
proxy_pass http://127.0.0.1:8082/;
}
}
- 项目代码的修改
代码的修改我们主要修改两个地方：vue-router的base属性和webpack的output中的publicPath（在vue脚手架项目中，我们一般是配置config文件夹下的index.js中assetsPublicPath的值来修改publicPath，所以我们这里修改的是index.js文件）。
// router/index.js
export default new Router({
mode: 'history',
base: '/my-vue/',
scrollBehavior: () => ({ y: 0 }),
routes: [
....
]
这里如果是默认的hash模式，则不需要进行任何修改，也不需要添加base属性
如果是history模式，这里就需要添加base属性，base的值为nginx上配置的子目录的值，这里为/my-vue/。这样vue-router才能正确的找到正确的路由页。
接下来修改config/index.js文件。
// config/index.js
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
// 这里只需要将原来的/改成./就可以了
//将资源的读取方式从绝对路径换成相对目录，这样就能根据当前的子目录正确获取资源。
assetsPublicPath: './',
...
},
...
}
到这里我们就配置完了，按照上面的步骤跑起来应该就可以看到页面内容了。
tips
-
如果配置完使用[ip]:8082可以访问我们的node服务，但是访问[ip]/my-vue/返回404，那就是nginx的代理没配置成功。
404
-
如果访问[ip]/my-vue/，页面资源都已经加载了，但是页面内容没显示出来，这时候就是router/index.js的配置没配置对。
页面内容没显示
- 如果访问[ip]/my-vue/，页面资源报了404错误，这时候就是
assetsPublicPath属性没有配置正确。
网友评论