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>