VUE项目打包之后修改配置文件（包括后台地址，图片公共路径等）

Vue 打包后，如果想修改整体的后台接口域名，或者图片文件的路径，就需要在源代码中修改后，再次进行build打包。这样很不灵活，先看一下vue打包后的文件结构：

项目打包后会生成一个dist文件夹

dist中有一个存放外部资源的static，它里面的文件是不会被打包编译的，
所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，也就是将图中的config.js引入到项目里的index.html中使用，然后就可以全局使用。

项目中使用到的文件大致有上图几个
1，首先在static中创建一个config.js文件
2，然后在创建的config.js配置文件中，声明一个对象Glob，将它赋值给window，对象名字随便取，只要不占用关键字即可，对象中存放你所需要配置的各种路径和数据，如下：

这里说明下，赋值给window，在vue里面获取不到window对象。所以不要赋值给window，直接定义个常量就好。

/*window.Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(这里是window对象)
.......
}
*/
const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(常量就可以)
.......
}

3，将此配置文件在index.html 文件中引入

4，axios 配置文件（这里我写在了utils下的request.js里了，这里封装了axios）

import axios from "axios";

let baseURL
baseURL = Glod.BaseUrl

const service = axios.create({
    baseURL:baseURL ,
    timeout: 115000 // request timeout
});

如果你的项目里没有图片或者导出之类的需要别的路径的话，到此就结束了

如果有图片或者导出等其他需要单独调用的接口如下：
在config.js中定义好路径

const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(常量就可以)
picUrl: "http://xxx.api.com", //图片
exportUrl: "http://xxx.api.com"	//导出
.......
}

然后在要用的页面或组件里直接引入使用

就可以了

本文借鉴了webpack打包vue项目后，配置可以修改的配置文件

因为项目中还有图片和导出等需要单独调用的地址，所以在此基础上做了一些修改