vue-cli2/vue-cli3之抽离打包请求之config

场景需求:

　　由于可能分为不少请求场景，因此不能换一次请求就打包一次，因此得把请求地址放到打包好的一个静态包里面改变

vue-cli2版本的

　　static/config/index.js

　　

const peconfig = 'development';
switch (peconfig) {
  case 'development':
    var tes1 = 'www.开发的.com';
    break;
  case 'production':
    var tes1 = 'www.部署的.com';
    break;
  case 'test':
    var tes1 = 'www.测试的.com';
    break;
}
window.g = {
  peconfig: peconfig,
  testUrl: tes1 // 配置服务器地址,
};

index.html

在body上面加载script

<script type="text/javascript" src="/static/config/index.js"></script>

而后就能够在其余页面引用了，好比我在HelloWorld.vue引用

var baseURLStr = window.g;
    console.log('pub', baseURLStr);

当你打包以后，改动了dist里面所对应的config后，地址就会直接变了

 

vue-cli3版本的

其实cli3和cli2大体上差很少

public/config/index.js

const peconfig = 'development';
switch (peconfig) {
  case 'development':
    var tes1 = 'www.开发的.com';
    break;
  case 'production':
    var tes1 = 'www.部署的.com';
    break;
  case 'test':
    var tes1 = 'www.测试的.com';
    break;
}
window.g = {
  peconfig: peconfig,
  testUrl: tes1 // 配置服务器地址,
};

public/index.html

<script type="text/javascript" src="/config/index.js"></script>