vue 打包生成配置文件，方便外部修改公共路径，不用每次都进行打包部署

2024-03-06 22:49:08

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.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>
注：引入的文件路径一定要正确哦

4.使用。到这里相信会一点js基础知识的同学都知道怎么在项目中使用我们配置的数据，没错就是 window.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 = window.Glob.BaseUrl  // 在这里使用配置文件中的域名
    } else {   // 正式环境                               
        baseURL = window.Glob.BaseUrl  // 在这里使用配置文件中的域名 
    }
}
const Axios = axios.create({
	baseURL:baseURL , 		     
	timeout: 60000, 		     
	responseType: "json",
	withCredentials: false
});
.....

到此，项目的配置文件就已经设置好了，这样测试环境和正式环境的切换，或以后公司的后台服务器要迁移和域名更换等，就可以直接在配置文件中修改，而不用重新打包部署。

需要注意一点，每次更改了配置文件，就需要重新进入一下项目，也就是重新刷新一下首页，让配置文件重新引入一次，覆盖掉原有的 window.Glob 对象，这样修改才会生效。

码农公寓

相关文章