以前我们设置vue代理地址的时候是在vue.config.js文件中增加devServe属性,然后在proxy属性里面配置代理地址,目前网上都是配置一个代理地址的方法,但在实际开发中需要配置多个代理地址,我的这个方法只需要在.env.development文件里配置代理地址即可,打包时自动替换地址。下面是方法
1.在src目录新建一个config文件夹,里面新建一个index.js文件
const obj = process.env
const tempObj = {}
for (const key in obj) {
if (key.indexOf('VUE_APP') !== -1) {
tempObj['/' + key] = {
target: obj[key],
changeOrigin: true,
pathRewrite: {
['^/' + key]: '/'
},
url: process.env.NODE_ENV === 'production' ? obj[key] : key
}
}
}
module.exports = {
proxy: tempObj
}
2.然后像下面这样
devServer: {
port: port,
open: true,
https: false,
overlay: {
warnings: false,
errors: true
},
proxy: config['proxy']
},
3.在需要获取服务器地址的地方这样获取就可以了,后面可以拼接任何api接口地址
onfig['proxy']['/VUE_APP_URL'].url
4.然后记得在babel.config.js文件中增加sourceType属性
module.exports = {
presets: [
'@vue/app'
],
sourceType: 'unambiguous',
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}