1、在项目中找到static文件夹,在里面创建一个配置文件,起名为config.js
┌── build
├── config
├── node_modules
├── src
├── static
│ ├── config.js // 配置文件
│
├── index.html:
2、然后在创建的config.js配置文件中,声明一个全局Windows对象Glob
/**
* vue 打包生成配置文件,方便外部修改公共路径,不用每次都进行打包部署
*/
window.Glob = {
BaseUrl:'http://39.99.202.195'
}
3、将此配置文件在index.html 文件中引入(注意:引用的路径)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>效果测试平台</title>
<script type="text/javascript" src="./static/config.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4、axios 配置文件
import axios from 'axios'
....
let baseURL
// 判断开发环境(一般用于本地代理)
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/api'
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = window.Glob.BaseUrl // 在这里使用配置文件中的域名
} else { // 正式环境
baseURL = window.Glob.BaseUrl // 在这里使用配置文件中的域名
}
}