目前开发有个需求是一个项目给不同的地区做一个版本的区分，各个地区需要不同的大标题以及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声明的全局变量，这里可以直接使用
Vue.prototype.$Global = Global_
或者你也可以
使用Mixin
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
import Vue from 'vue';
import App from './App.vue';
// 创建一个 Vue 实例作为全局事件总线
const globalConfig = {};
new Vue({
provide: {
$globalConfig: globalConfig
},
render: h => h(App),
}).$mount('#app');
export default {
inject: ['$globalConfig'],
// 在组件中可以通过 this.$globalConfig 访问全局配置对象
};
配置的应用
这里是给不同版本设置不同的图标，直接使用一个computed来返回图片即可，通过读取vue原型上的$Global属性，可以直接拿到配置文件中的版本信息
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，减少了不同分支开发的困扰，也减轻了部署的难度。
如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！
往期好文推荐
- 🚀全网最详细！Echarts+gl实现3D地图板块
- 🤔公司实习生居然还在手动切换node版本？
- 📚想搞私活？你可能需要配置多个SSH
- 🚀3.40秒到231.84毫秒，我用Performance面板分析性能瓶颈全流程（多图流量预警⚠️）！
- 五个有用的iframe踩坑问题，快收藏！
- 面试必备-Vue3+Ts手写实现无限滚动列表
- 面试必备-Vue 3 + ts 掌握 defineExpose：项目实践！
- 面试必备，学会使用 Vue3 + ts 手写实现拖拽hook！
原文链接：https://juejin.cn/post/7357998495481954313 作者：一只大加号
