vue一次打包适应多个地址

　　最近遇到的问题，vue打包后，写在代码里的IP访问地址不能满足一次打包，多个地址使用。

　　在网上找的，配置prod，dev之类的，需要用打包命令做区分，还是需要做多次打包，不太满足期望。最终找到了解决方法。做一下记录。

　　1.创建config.json

在static目录下创建文件，config.json。

内容如下：

{
    "BASE_URL":"http://www.baidu.net"
}

2.引用

import axios from "axios";
Vue.prototype.$http = axios;
axios.get('/static/config.json').then((res) => {
  // 基础地址
  Vue.prototype.LOGIN = res.data.BASE_URL
})

在main.js中引用config.json的代码。

找到的别的记录里是 Vue.prototype.LOGIN = res.BASE_URL。这样子没有引用到，就打了一下log，发现结构并不能这样使用，就有了现在的使用结构。

3.使用

 

this.$http.post(this.LOGIN+ "/contract/get/name", {
          companyId: _this.comid
        })
        .then(function(res) {
          _this.cont = res.data.data;
        })
        .catch(function(error) {});

 

前面设置的Vue.prototype的值在这里可以直接使用。

4.打包

执行npm run build.

打完包之后，static的结构如下：

没有破坏结构。

5.部署

部署到服务器上可以正常使用。记录完毕

---

在使用中遇到另一个问题，页面缓存。

在A浏览器登陆使用test1的地址登陆过之后，修改config.json文件，改成test2的地址，不能及时更新。使用B浏览器登陆，地址成为test2。这个问题有待观察解决。

解决方法：在使用中使用的 this.LOGIN 。替换成Vue.prototype.LOGIN。打包之后放到服务器上，修改config.json文件，刷新页面就能获取最新地址。