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项目打包后动态获取自定义变量

目前使用新版 @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

Vue项目打包后动态获取自定义变量

这样我们就可以直接修改 index.js 中变量的值就可以啦


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Go语言学习笔记

Go语言学习笔记

雨痕 / 电子工业出版社 / 2016-6 / 89

作为时下流行的一种系统编程语言,Go 简单易学,性能很好,且支持各类主流平台。已有大量项目采用 Go 编写,这其中就包括 Docker 等明星作品,其开发和执行效率早已被证明。本书经四年多逐步完善,内容覆盖了语言、运行时、性能优化、工具链等各层面知识。且内容经大量读者反馈和校对,没有明显的缺陷和错误。上卷细致解析了语言规范相关细节,便于读者深入理解语言相关功能的使用方法和注意事项。下卷则对运行时源......一起来看看 《Go语言学习笔记》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具