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

Integ 发布于2019-08-26 18:27 / 1348人阅读

摘要：若不足之处，欢迎大家指出，共勉。如果觉得不错，记得点赞，谢谢大家

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

//  然后使用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 后记

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

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

GPU云服务器云服务器 python项目打包服务器打包项目为什么 android打包后 eclipse项目打包war

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110236.html

VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0