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>