如何使用一个配置快速部署不同版本(多种方法实现)

ゝ一纸荒年。 2024-04-28 13:27 44阅读 0赞

> 目前开发有个需求是一个项目给不同的地区做一个版本的区分，各个地区需要不同的大标题以及logo的区分，一开始这个需求是一个分支一个分支的做的，所以不同版本演变成了不同的分支，每次打包都需要给对应的地区版本进行打包，对于分支的切换和维护都十分困难

> 对此需要把所有的版本维护到同一个分支里面，想通过配置文件的方法来在同一个分支中做判断，以达到同一个分支可配置不同版本的logo以及大标题等的功能。

### 生成一个配置文件 ###

生成一个放置在public下面的一个config.js,因为public的文件不会被打包，所以放到public下面是一个比较好的选择。

因为不会被打包，那么说明打包后这个config文件是可以被修改的，并且修改之后，项目读取到的config都最新的，说明可以通过配置来改变项目的一些不同的版本

![image.png][]

> 在 Vue CLI 创建的项目中，`public` 目录下的文件不会被打包，而是会原封不动地复制到输出目录（例如 `dist`）中。这是因为 `public` 目录中的文件通常是直接在浏览器中访问的静态资源，比如图像、字体文件或者其他不需要被 webpack 处理的资源。

### 引入配置文件 ###

![image.png][image.png 1]

作为单页面应用，直接在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的配置文件并没有被进行打包

![image.png][image.png 2]

而且在index入口文件中，config正常使用，也就是说当前的dist包，会根据修改config中的版本配置信息，即可变成不同版本的dist，减少了不同分支开发的困扰，也减轻了部署的难度。

![image.png][image.png 3]

[image.png]: https://img-blog.csdnimg.cn/img_convert/ad7dcb931b6f653e4533c13deee1650c.webp?x-oss-process=image/format,png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/84c9d5b46f885d9dd4465d74f5329f65.webp?x-oss-process=image/format,png
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/201b41b16410d81a37976d96834ad3e2.webp?x-oss-process=image/format,png
[image.png 3]: https://img-blog.csdnimg.cn/img_convert/b30f422fd8f66f3a84f75d31f1909f91.webp?x-oss-process=image/format,png