nginx+pm2+vue+webpack发布项目

用pm2 来管理vue的部署，用nginx来做服务器反向代理。

pm2是一个内置负载均衡的node进程管理器；
nginx做反向代理的作用是隐藏vue服务的真实ip地址。

通用的项目目录结构

搭建pm2+vue

因为pm2是基于服务来管理的，所以我们需要一个在webpack构建好的静态文件夹上（一般是dist/）搭建一个node服务，这里我们用express来搭建node服务。

// 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属性没有配置正确。

nginx+pm2+vue+webpack发布项目

搭建pm2+vue

使用nginx代理服务

tips

你可能感兴趣的:(nginx+pm2+vue+webpack发布项目)