目前开发有个需求是一个项目给不同的地区做一个版本的区分，各个地区需要不同的大标题以及logo的区分，一开始这个需求是一个分支一个分支的做的，所以不同版本演变成了不同的分支，每次打包都需要给对应的地区版本进行打包，对于分支的切换和维护都十分困难
对此需要把所有的版本维护到同一个分支里面，想通过配置文件的方法来在同一个分支中做判断，以达到同一个分支可配置不同版本的logo以及大标题等的功能。
生成一个配置文件
生成一个放置在public下面的一个config.js,因为public的文件不会被打包，所以放到public下面是一个比较好的选择。
因为不会被打包，那么说明打包后这个config文件是可以被修改的，并且修改之后，项目读取到的config都最新的，说明可以通过配置来改变项目的一些不同的版本
在 Vue CLI 创建的项目中，public 目录下的文件不会被打包，而是会原封不动地复制到输出目录（例如 dist）中。这是因为 public 目录中的文件通常是直接在浏览器中访问的静态资源，比如图像、字体文件或者其他不需要被 webpack 处理的资源。
引入配置文件
作为单页面应用，直接在index.html的入口文件里面引入这个配置文件，那么就相当于在全局引入了配置文件，在其他地方都可以用到，并且这里使用的是const声明配置的变量。
设置到vue原型上
如果在上面步骤成功引入了配置文件，那么可以在main.js中直接通过Global_读取配置
为了方便在vue中能方便引用，我们将这个变量挂载到vue的原型上，方便后面直接在组件中使用this.来进行访问
Global_是const声明的全局变量，这里可以直接使用
js
Vue.prototype.$Global = Global_或者你也可以
使用Mixin
js
import Vue from 'vue';
import App from './App.vue';
// 在这里定义你的全局配置对象
const globalConfig = {
// 你的全局配置项
};
// 使用 Vue.mixin() 声明一个全局混入对象
Vue.mixin({
data() {
return {
globalConfig: globalConfig
};
}
});
new Vue({
render: h => h(App),
}).$mount('#app');使用provide inject
js
import Vue from 'vue';
import App from './App.vue';
// 创建一个 Vue 实例作为全局事件总线
const globalConfig = {};
new Vue({
provide: {
$globalConfig: globalConfig
},
render: h => h(App),
}).$mount('#app');
js
export default {
inject: ['$globalConfig'],
// 在组件中可以通过 this.$globalConfig 访问全局配置对象
};配置的应用
这里是给不同版本设置不同的图标，直接使用一个computed来返回图片即可，通过读取vue原型上的$Global属性，可以直接拿到配置文件中的版本信息
js
computed: {
getLogo() {
let logo
switch (this.$Global.version) {
case 'zj':
logo = Logozj
break
case 'cq':
logo = Logocq
break
case 'kl':
logo = Logokl
break
}
return logo
},基本上到这里已经完成需求了，这里只是以一个简单的版本信息配置来做展示，可能还有更加复杂的场景，但都是以不变应万变
打包后的效果
可以看到config的配置文件并没有被进行打包
而且在index入口文件中，config正常使用，也就是说当前的dist包，会根据修改config中的版本配置信息，即可变成不同版本的dist，减少了不同分支开发的困扰，也减轻了部署的难度。 