Vue cli3.0 搭建项目配置全局地址

 

        由于项目需求，需要在Vue项目配置全局可以访问得地址，打包以后后台可以动过脚本更改这个全局地址，Vue cli2.x

的版本还是很多的，但是cli3.0的真的好难找，所以记录一下自己的的配置方法。

        在public文件下新建一个json文件，里面配置相应的地址

 

        

        然后在main.js中加入一个获取serverConfig.json的方，并把它设置为Vue的全局变量

function getServerConfig() {
  return new Promise((resolve, reject) => {
    axios
      .get("./serverConfig.json")
      .then(result => {
        Vue.prototype.baseURL = result.data["baseURL"];
        Vue.prototype.apiURL = result.data["apiURL"];
        resolve();
      })
      .catch(error => {
        console.log(error);
        reject();
      });
  });
}

async function init() {

    await getServerConfig();

    new Vue({

        router,

        render: h => h(App)

    }).$mount("#app");

}

init();

        这样就是通过this.$baseUrl来全局访问这个地址，每次也只需要更改public文件夹下的serverConfig.json来改变访问地址。打包后dist文件夹下也有一个serverConfig.josn，后台需要更改地址也只需要改这个地址就可以了，还是很方便的。