vue-cli3中使用externals直接引入配置文件

需求分析：项目中引用多个后台服务，经常需要更换域名，如果将配置文件打包，修改时将造成一定的困难，因此想将配置文件不进行打包，直接暴露出来

1、首先在public目录下建立"urlConfig.js"项目，并在index.html文件中进行引用

// urlConfig.js
window.urlConfig = {
  api1: "http://123.21.1.13:3333",
  api1: "http://123.21.2.13:3333",
  api1: "http://123.21.3.13:3333",
  add: function(a, b) {
    return  a+b
  }
}

//index.html

  ...
  
  //在此处进行引入urlConfig.js文件
  

2、在项目目录下建立"vue.config.js"

module.exports = {
  configureWebpack: {
    externals:  {
      //此处引号中的urlConfig必须和window.urlConfig一致
      urlConfig: "urlConfig"
    }
  }
}

3、在main.js中直接引用

const urlConfig = require("urlConfig");

//控制台将打印：http://123.21.1.13:3333
console.log(urlConfig.api1);

//即可在全局进行引用，采用this.$urlConfig进行调用
Vue.prototype.$urlConfig = urlConfig;

4、vue执行npm run build 后

项目中就会有urlConfig.js文件，并没有被打包

因为奇葩需求，才会去这么做，希望能帮到大家