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
<head>
  ...
  <title>something</title>
  //在此处进行引入urlConfig.js文件
  <script src="<%= BASE_URL %>urlConfig.js"></script>
</head>

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文件，并没有被打包

因为奇葩需求，才会去这么做，希望能帮到大家
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容