vue 打包生成配置文件，方便外部修改公共路径，不用每次都进行打包部署
Vue 打包后，如果想修改整体的后台接口域名，或者图片文件的路径，就需要在源代码中修改后，再次进行build打包。这样很不灵活，先看一下vue打包后的文件结构，项目打包后会生成一个dist文件── dist├── static// 外部静态资源文件夹，对应项目中的static文件夹 ，与index.html同级└── ind...
Vue 打包后，如果想修改整体的后台接口域名，或者图片文件的路径，就需要在源代码中修改后，再次进行build打包。这样很不灵活，先看一下vue打包后的文件结构，项目打包后会生成一个dist文件
── dist
├── static // 外部静态资源文件夹，对应项目中的static文件夹 ，与index.html同级
└── index.html // 项目入口主文件从上面的打包文件解构中我们知道，vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。
具体的方法如下：
1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js
如果不清楚项目结构的可以看一下前面我写的Vue项目目录结构说明与配置
┌── build
├── config
├── node_modules
├── src
├── static
│ ├── config.js // 配置文件
│
├── index.html:
2.然后在创建的config.js配置文件中，声明一个对象Glob，将它赋值给window，对象名字随便取，只要不占用关键字即可，对象中存放你所需要配置的各种路径和数据，如下：
这里说明下，赋值给window，在vue里面获取不到window对象。所以不要赋值给window，直接定义个常量就好。
/*window.Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
//BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
appkey:"",
token:""
.......
}
*/
const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
//BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
appkey:"",
token:""
.......
}3.将此配置文件在index.html 文件中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="./static/config.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
注：引入的文件路径一定要正确哦,路由history模式下使用相对路径。不然的话会报语法错误‘Uncaught SyntaxError: Unexpected token <’4.使用。到这里相信会一点js基础知识的同学都知道怎么在项目中使用我们配置的数据，没错就是 Glob,比如我们要配置axios请求路径如下：不清楚怎么配置的同学可以看一下前面我写的vue axios请求 配置
axios 配置文件
import axios from 'axios'
....
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/api'
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = Glob.BaseUrl // 在这里使用配置文件中的域名
} else { // 正式环境
baseURL = Glob.BaseUrl // 在这里使用配置文件中的域名
}
}
const Axios = axios.create({
baseURL:baseURL ,
timeout: 60000,
responseType: "json",
withCredentials: false
});
.....到此，项目的配置文件就已经设置好了，这样测试环境 和 正式环境的切换，或以后公司的后台服务器要迁移 和 域名更换等，就可以直接在配置文件中修改，而不用重新打包部署。
需要注意一点，每次更改了配置文件，就需要重新进入一下项目，也就是重新刷新一下首页，让配置文件重新引入一次，覆盖掉原有的 Glob 对象，这样修改才会生效。
前往低代码交流专区
更多推荐
17
0- 0
已为社区贡献6条内容
所有评论(0)