vue项目打包部署——nginx代理访问

1. 首先vue项目打包（我使用的是vscode工具）

这是我新建的一个项目工程：

新建或修改原有工程中的vue.config.js文件，增加或修改以下内容：
主要是publicPath 与outputDir 两项配置，若项目中有baseUrl,替换为publicPath （baseUrl, vue cli 3.3 已弃用）

    module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // webpack-dev-server 相关配置
    devServer: {
    port: 8888
    }
    }

修改完成之后就可以进行打包了
在控制台终端输入npm run build

打包完成之后项目中会生成一个dist文件夹，直接访问里面的index.html就可以

2. 将dist文件夹拷贝到Nginx根目录下

3. 修改Nginx的配置

• 修改Nginx的代理端口号listen配置，如8100， 修改项目的存放地址location的root配置为 dist
• 配置完成后，去启动你的nginx，然后访问就可以了。