最近需求: 要求可以动态修改请求baseURL。
1、安装插件
npm install --save-dev generate-asset-webpack-plugin
2、修改
vue.config.js
module.exports = {
configureWebpack:{
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const cfgJson = require('./serverconfig.json') //这里引入的地址就是后面新建serverconfig.json的地址
var createServerConfig = function (compilation) {
return JSON.stringify(cfgJson);
}
chainWebpack(config){
config
.plugin('GenerateAssetPlugin')
.use('generate-asset-webpack-plugin', [{
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}])
}
}
}
3、在
main.js
Vue.prototype.getConfigJson = function () {
axios.get("serverconfig.json").then((result) => {
localStorage.setItem('ApiUrl',result.data.VUE_APP_SERVE_URL);
}).catch((error) => {
console.log('getConfigJson Error!', error)
})
}
4、在
app.vue
mounted () {
this.getConfigJson();
},
5、修改Axios的BaseURL地址。
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
baseURL: localStorage.getItem('ApiUrl'),
timeout: 5000, // request timeout
headers: { language: getLocalLang() }
// headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"}// qs序列号需要携带头部
})
7、 新建JSON文件
serverconfig.json
,不然打包后报错
{"VUE_APP_SERVE_URL":"http://210.132.158.3:1000/api"}
7、在每次
npm run build
打包的时候, 修改dist文件夹中的 serverconfig.json 中的地址即可
一些小玩意
https://www.jianshu.com/p/3f0b7ea9df53