Vue项目打包后动态获取自定义变量
栏目: JavaScript · 发布时间: 5年前
内容简介:一般使用
一般使用 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
中变量的值就可以啦
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Webpack介绍和使用(配置环境变量,打包依赖)
- vue-cli3环境变量与分环境打包
- 全局变量,静态全局变量,局部变量,静态局部变量
- python变量与变量作用域
- Python基础-类变量和实例变量
- python编程(类变量和实例变量)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
构建之法(第二版)
邹欣 / 人民邮电出版社 / 2015-7 / 59
软件工程牵涉的范围很广, 同时也是一般院校的同学反映比较空洞乏味的课程。 但是软件工程的技术对于投身IT 产业的学生来说是非常重要的。作者邹欣有长达20年的一线软件开发经验,他利用业余时间在数所高校进行了长达6年的软件工程教学实践,总结出了在16周的时间内让同学们通过 “做中学 (Learning By Doing)” 掌握实用的软件工程技术的教学计划,并得到高校师生的积极反馈。在此基础上,作者对......一起来看看 《构建之法(第二版)》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
html转js在线工具
html转js在线工具