vue项目配置反向代理后打包

vue项目配置反向代理后，打包到测试环境依然跨域

vue项目配置了反向代理，打包时要修改哪些地方

反向代理只在本地环境下生效，打包到线上需要后端处理，或配置nginx

引用皆我百晓生小程序回复内容作答：
当你在Vue项目中配置了反向代理后，在打包时需要修改以下几个地方：

修改vue.config.js文件：在项目根目录下找到vue.config.js文件（如果没有则新建该文件），并添加以下内容：

module.exports = {
  // ...其他配置项
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-proxy-url', // 设置代理目标
        changeOrigin: true, // 是否改变原始主机头为目标URL
        pathRewrite: {
          '^/api': '' // 路径重写为''
        }
      }
    }
  }
}

其中，target字段需要填写代理目标的URL，pathRewrite字段用于重写URL路径。

打包时指定环境变量：在打包命令中指定环境变量，如使用Vue CLI，默认的打包命令为npm run build，可以在package.json文件中修改为：

{
  "scripts": {
    "build:test": "npm run build -- --mode test"
  }
}

这里我们新增了一个build:test命令，指定了mode为test，即使用测试环境的配置。

根据环境变量修改代理配置：
在vue.config.js文件中，可以根据环境变量来选择不同的配置，如：

module.exports = {
  // ...其他配置项
  devServer: {
    proxy: process.env.NODE_ENV === 'production' ? '/api' : {
      '/api': {
        target: 'http://your-proxy-url',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在production环境下，直接使用'/api'作为代理路径。

以上是常见的修改方法，具体根据你的项目和需求可能会有所不同。最后，在打包前记得确认以上修改是否生效，并根据实际情况调整配置。

【相关推荐】

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7673778
这篇博客也不错, 你可以看下Vue入门系列之 Vue项目开发环境搭建
您还可以看一下徐照兴老师的Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇课程中的为条件查询设置重置功能小节, 巩固相关知识点
除此之外, 这篇博客: vue项目打包后自定义可更改某些参数的配置方法中的 vue项目打包后自定义的可更改某些参数的配置文件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
在一些特殊的项目上，写好代码打包后，在某些内网环境下的部署人员需要更改一些比如公共的请求路径等配置，直接找请求的文件是找不到的，我们需要手动添加一个不会被打包编辑的文件，这里可以选择在public文件夹里面新建一个 config.jsonc 文件，然后在mian.js里面 new vue之前，通过axios先加载这个本地文件，然后再绑定到vue.prototype上面，这样，只要更改config.jsonc文件里面的参数，就能在打包后也可以随时更改一些参数配置。
示例如下：

其中 config.jsonc 就是一个json格式的文件，不过可以添加注释

在main.js里面导入axios，通过axios.get来请求这个文件
```
import axios from 'axios';
axios.get('./config.jsonc').then(res => {
    // eslint-disable-next-line no-new-func
    const config = Function(`return ${res.data}`)();
    const { viewer } = config;
    if (viewer) {
        Vue.prototype.$viewer = viewer.$url_map;
    }
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app');
});
```
这时，在组件上通过this.$viewer即可访问到这个属性。
如果需要在单独的js文件上面访问prototype上绑定的属性，可以进行如下操作：
```
import Vue from 'vue';
function getBaseUrl() {
    return Vue.prototype.$viewer ;
}
```
项目的特殊性，打包后某些配置需更改，在此记录一下。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^