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
然后完工 打包发布直接一条龙 隔壁前端妹子直呼内行!