关于vue反向代理的坑

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  runtimeCompiler: true,
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map'
  },
  devServer: {
    port: 8080,
    https: true,
    proxy: {
      '/api': {
        target:'http://localhost:8081',
        secure: false,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

在本地有访问路径中有/api/xxx/,nginx中配置了/xxx/访问 ip:port/getxxx?a=&b=&

正常访问没有任何问题

但是部署到服务器中之后却总是502，这是因为vue dist部署到服务器之后，devServer反向代理服务器并不会部署上去，这是nginx就充当了devServer的作用,因此就应该在nginx中配置location /api/xxx/ 才能够正常访问