nginx部署vue-cli@4项目

本文所用环境：

服务端系统：windows 10
nginx版本：1.16.1
vue-cli版本：4.1.2

直接上步骤：

1. 将打包的目录从dist改成自己自定义的项目名称，这里以huzhenv5为例，修改vue.config.js的outputDir字段。
2. 因为在部署nginx时，我们会将整个打包后的huzhenv5文件夹拷贝到nginx的html目录下，所以输出的index.html文件引入的资源文件路径上，我们要加上"/huzhenv5"，通过配置vue.config.js的publicPath字段实现。

完整的vue.config.js文件代码：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/huzhenv5/' : '/', // 输出的index.html引入的资源路径前面增加/huzhenv5
    outputDir: 'huzhenv5', // 打包输出的文件夹名
    indexPath: 'index.html',
    // 开发时，代理后台接口的配置
    devServer: {
        // 设置默认端口
        port: 8080,
        // 默认打开浏览器
        open: false,
        proxy: {
            '/api': {
                // 目标 API 地址
                target: 'http://localhost:9801', // 真实的api地址
                // 如果要代理 websockets
                // ws: true,
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

3. 运行npm run build打包工程，工程根目录自动生成huzhenv5文件夹
4. 将huzhenv5文件夹拷贝到nginx的html目录下
   
5. 修改nginx的配置：修改nginx安装目录的conf文件夹下的nginx.conf文件，在http模块下增加一个server模块，增加的server模块配置如下：

server {
    listen   8091; #nginx监听的端口
    server_name  localhost; #安装nginx的服务器的ip

    location /huzhenv5/ {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /huzhenv5/index.html;
    }
    
    location /api/ {
        proxy_pass    http://localhost:9801; #前端http请求转发的地址
        rewrite ^/api/(.*)$ /$1 break;
    }
}

6. 启动nginx，访问http://localhost:8091/huzhenv5/index.html