频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
Vue项目打包后动态获取自定义变量-前端技术-SegmentFault思否
2019-05-11 22:05:10           
收藏   我要投稿

无需申请自动送

1.1 业务场景

一般使用 Vue 项目连接后端请求,使用的 axios

import axios from 'axios'
export const CMSAPI = axios.create({
  baseURL: "https://localhost:8080",
  timeout: 30000,
});

axios 中的 baseURL 一般是访问地址

Vue 项目打包后,如果我们需要修改这个 baseURL 就需要修改免费白菜网站大全2018重新 build

这样就比较麻烦了

有没有什么办法可以在Vue项目打包后再自定义变量呢?

2 实现原理

2.1 文件

\

目前使用新版 @vue/cli 创建的项目目录如上

我们发现这个图标文件 favicon.ico 在打包文件中会单独存在

类似,我们在这个文件夹中新建一个 index.js 文件

2.2 免费白菜网站大全2018

index.js 文件中,我们直接定义一个变量

//  index.js
const apiURL = 'https://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 国际许可协议 进行许可。

出处为:https://github.com/xrkffgg/Tools

点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇:用JavaScript实现插入排序-疯狂的技术宅-SegmentFault思否
下一篇:ES6专题—class与面向对象编程-体验javascript之美-SegmentFault思否
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站