1 前言
1.1 业务场景
一般使用 Vue
项目连接后端请求,使用的 axios
import axios from 'axios'
export const CMSAPI = axios.create({
baseURL: "http://localhost:8080",
timeout: 30000,
});
axios
中的 baseURL
一般是访问地址
Vue
项目打包后,如果我们需要修改这个 baseURL
就需要修改代码重新 build
这样就比较麻烦了
有没有什么办法可以在Vue
项目打包后再自定义变量呢?
2 实现原理
2.1 文件
目前使用新版 @vue/cli
创建的项目目录如上
我们发现这个图标文件 favicon.ico
在打包文件中会单独存在
类似,我们在这个文件夹中新建一个 index.js
文件
2.2 代码
index.js
文件中,我们直接定义一个变量
// index.js
const apiURL = 'http://localhost:8080'
// index.html
<script type="text/javascript" src="<%= BASE_URL %>index.js"></script>
// 然后使用window对象
window.apiURL = apiURL
// axios中引用
import axios from 'axios'
export const CMSAPI = axios.create({
baseURL: window.apiURL,
timeout: 30000,
});
2.3 打包
npm run build
后,会发现根目录中有我们定义的 index.js
这样我们就可以直接修改 index.js
中变量的值就可以啦
3 后记
感谢支持。若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家 😂
欢迎关注 我的: 【Github】 【掘金】 【简书】
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。