VUE在webpack后动态修改配置文件

webpack vue项目动态修改配置文件 前言需求项目环境实现

前言 😑😑😑开始之前，请允许我好好吐槽一下😑😑😑 本想借鉴一下各路神仙的一些骚 *** 作来达到目的，但是结果令人失望之极，千篇一律，关键是方案完全起不到作用，也不清楚为什么还有那么多的人在转载这种方法，感觉有点误人😮😮😮😮

🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬

---

需求

vue项目在build编译后，通过外部配置文件(如config.json)动态修改打包后项目内的API地址

项目环境

vue-cli：vue-cli + 4.5.6
vue：vue + 2.6.11
axios：axios + 0.24.0

实现 在public目录下，创建config.json，在config.json中设置自己的配置参数，vue在build编译时会将此文件复制到根目录下。

// public/config.json
// 根据自己需要随意配置
{
	"BASE_URI": "http://xxx.com.cn",
	"BASE_API_URL": "http://xxx.com.cn/api",
}

在src/main.js中利用axiosaxios获取config.json数据，本人是将获取的配置参数存储在localStorage中，方便随时使用。

 // src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

/*! 新增获取配置文件中信息 ----- start !*/
// 注意这里路径问题，如果config.json在public下，则路径为 /config.json，因为build后config.json在更目录下
axios.get('/config.json').then(res => { 
	localStorage.setItem('ApiUri', res.data.BASE_API_URL)
})
/*! 新增获取配置文件中信息 ----- end !*/

new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app')

最后在自己项目的http请求中统一处理，本人使用的是axios，此文也以此为例

// http.js
// 具体项目位置请自行决定，只要在项目中的接口请求统一封装处在处理即可
import axios from "axios"

let _axios = axios.create({
    baseURL: process.env.VUE_APP_MODE === 'prod' ? localStorage.getItem('ApiUrl') : process.env.VUE_APP_BASE_API,
    headers: {
        'Accept': 'xxxx'
    }
})

...
// 剩余为自己HTTP请求处理代码
...

---

项目build部署后，只需修改dist目录下的config.json，然后重新加载项目，最好能重新打开，因为获取配置参数实在vue入口处执行的。

这样我们就不需要在部署项目时，因API地址改变而频繁的重新build编译项目了