vue处理了跨域后线上环境如何切换

vue处理了跨域后线上环境如何切换

分享一个vue发布线上路径接口的问题 ！ 一般我们在做开发项目的时候在本地去做的时候常常就会遇到跨域 我们要处理跨域如下：

proxyTable: {
      '/api': {
        target: 'https://www.88888.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
    }
 },

这个大家都很熟悉了！

但是上线的时候出问题了发现我们接口请求的接口都变成了 【当前项目所在路径+接口名称】这样子

碰到axios.get(’/aa/bb’)请求，因为在aa的前面有个"/",表示根目录的意思，
所以"/aa/bb"会被解析为hostname+port+“aa/bb”,所以请求地址就为"www.88888.com:8080/aa/bb"

既然原因找到了！那就开始解决

开始解决

（以vue2.0为例）

1. 找到dev.env.js（本地环境） 和 prod.env.js（生产环境）

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"本地环境地址"'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:'"生产环境地址"'
}

2.找到 main.js

const host = process.env.NODE_ENV === 'development' ? '/api' : process.env.API_ROOT
                 //用来判断当前环境是线上还是线下      //'/api'配置代理转发的名称         //process.env.API_ROOT   取线上生产环境地址
const instance = axios.create({
  baseURL: host
})
Vue.prototype.$http = instance

然后完工 打包发布直接一条龙 隔壁前端妹子直呼内行！