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

2019-03-04 12:56:26 阅读：973 来源： 互联网

标签：axios 配置文件 baseURL js window vue 打包

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 对象，这样修改才会生效。

标签：axios,配置文件,baseURL,js,window,vue,打包
来源： https://blog.csdn.net/qq_41772754/article/details/88106508

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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