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

时间 2019-12-19 标签 vue 项目打包动态获取自定义变量

1 前言

通常使用 Vue 项目链接后端请求，使用的 axiosjavascript

import axios from 'axios'

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

axios 中的 baseURL 通常是访问地址html

Vue 项目打包后，若是咱们须要修改这个 baseURL 就须要修改代码从新 buildvue

这样就比较麻烦了java

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

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

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

相似，咱们在这个文件夹中新建一个 index.js 文件npm

index.js 文件中，咱们直接定义一个变量axios

//  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】【掘金】【简书】