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

最新推荐文章于 2025-07-07 17:08:02 发布

原创最新推荐文章于 2025-07-07 17:08:02 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

15 篇文章

订阅专栏

本文探讨了在Vue项目打包后如何实现动态获取自定义变量，避免每次修改都需要重新打包。通过在项目中创建一个JSON文件，定义变量，并在打包后直接修改该文件的值来达到目的。

1 前言

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

import axios from 'axios'

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

axios 中的 baseURL 一般是访问地址

Vue 项目打包后，如果我们需要修改这个 baseURL 就需要修改代码重新 build

这样就比较麻烦了

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

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

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

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

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,
});

npm run build 后，会发现根目录中有我们定义的 index.js

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

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得点赞，谢谢大家 ?

欢迎关注我的： 【Github】【掘金】【简书】