前言
😑😑😑开始之前,请允许我好好吐槽一下😑😑😑 本想借鉴一下各路神仙的一些骚操作来达到目的,但是结果令人失望之极,千篇一律,关键是方案完全起不到作用,也不清楚为什么还有那么多的人在转载这种方法,感觉有点误人😮😮😮😮🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬
需求
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编译项目了