vue 执行npm run build不执行跨域设置

Question

1：问题描述：利用vue开发项目本地调用接口跨域问题 于是采用在vue.config.js中配置 proxy进行代理 本地问题解决但是上线时候需要将代理地址在统一改回原有的正确接口 这样接口多了效率很低 所以想问下如何在执行 npm run build后不执行代理设置直接调用原有接口地址

2：` devServer: {

proxy: {
  '/api': {
    target: 'http://202.97.183.28:9090',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

},`

3：网上找了很多描述基本都是描述如何解决具体环境跨域的答案 请各位看看有没有什么好方法提高效率

Answer 1

1. 利用公共的接口入口来管理, 使用process.env.NODE_ENV来区分开发环境和生产环境
2. devServer只适用于开发环境, 生产环境请使用nginx或者后端设置请求头来处理跨域

Answer 2

在配置config.vue.js时候.根据环境判断是否启用proxy

• 简单示例如下

config.vue.js

const env = ??? // 忘记怎么取参数了,这个参数是npm run build 命令package里面传进来的
const config = {};
// 如果是生产环境则不添加代理
if(env === 'production') {
  config = {},
}
// 如果是开发环境,则添加
if (evn === 'development') {
  config = {
    proxy: {} // ... 
  }
}
module.exports = {
  ...config
}

tips

• 上面的代码只是个思路
• 配置项肯定是写错了的~~~

Answer 3

问题已解决 确实是根据环境变量来做做判断 因为我是采用 vue-cli3.0做的 所以需要在 根目录下分别设置 .env.development和 .env.production 在里面分别定义同一个变量 对应着API的名称
.env.production的内容为 VUE_APP_HOSTAPI = http://202.97.183.28:9090
.env.development 的内容为 VUE_APP_HOSTAPI = /api
然后在使用axiso调用的时候把环境变量给加上 比如
axios.get(${process.env.VUE_APP_HOSTAPI}/api.search.do...)

Answer 4

有没有文章可以描述下解决办法