vue3.0 引用外部配置文件在项目中使用

写在前面：

需求:将一些公用的配置文件放到项目外面，方便修改减少打包次数
打包之后只要修改这个配置文件就可以修改项目里的公共配置

操作步骤：

1.在public文件夹下新建配置json (名字不要叫config.json 不要问我为什么)

public文件夹

2.在main.js里面定义一个读取这个文件的方法，在初始化的时候读取这个文件。

function getEnvConfig () {
  return new Promise ((resolve, reject) => {
    axios.get('./envConfig.json').then(data => { //这里要先确保axios引入
      Vue.prototype["$env"] = data.data.env //将数据挂到vue原型上使用
      resolve();
    }).catch(error => {
      console.log(error);
      reject()
    })
  })
}

async function init() {
  await getEnvConfig();
}
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  created() {
    init()
  },
})

3.在文件中使用
在配置文件中 先引入Vueimport Vue from 'vue'再使用Vue.prototype.$env
在组件中直接使用this.$env
4.打包之后的样子

打包之后的配置文件
5.修改配置文件直接修改envConfig.json就可以 不用重新打包
6.放到服务器测试 没问题

参考