Vue中的vue.config.js中的devServer.proxy

在VUE项目当中，为了本地调试，会在vue.config.js 中配置 devServer。通过使用代理可以将指向本地的请求代理到后端开发的服务器上。同FQ。

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://IP:PORT/', //接口域名
        changeOrigin: true,             //是否跨域
        ws: true,                       //是否代理 websockets
        secure: true,                   //是否https接口
        pathRewrite: {                  //路径重置
          '^/api': ''
        }
      }
    }
  }
})

同时在指定baseurl时

axios.defaults.baseURL = '/api';

具体解释：

当浏览器发起一个请求时，会进行地址匹配。如果遇到/api那么会将target对应的域名接口替代本地的地址。同时由于设置了pathRewrite，/api会被重写为''。如http://localhost:8081/api/main 将会被代理到http://IP:PORT/main。

部署上线

因为在vue.config.js中配置的devServer.proxy只是在开发环境下将请求代理到后端服务器的本地服务，我们把项目打包成dist文件只把我们的组件等资源打包了，并不会将代理服务器给打包，所以项目中的请求路径不完整导致访问不到对应资源。

因此在Nginx中部署的时候需要使用一个代理来装载。如下

location ^~/api/ {
     proxy_pass http://IP:PORT/api/;
 }