大家好，我是若川。持续组织了6个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列
本文来自读者@漫思维 投稿授权
原文链接：https://juejin.cn/post/7072677637117706270
以下我会列举出我业务中遇到的问题难点及相对应的解决方法，解释简繁体插件怎么诞生的整个过程
目前开发工作有大量的营销活动需要编写，特点是小而多，同时现阶段项目需要做大陆与港台两个版本
先做完大陆版本，最后再复刻一份代码, 改成港台版本
将项目中的汉字、价格、登录方式进行替换。
首先复制来复制去就不是一个很好的方案，容易复制出问题，其次两个版本都是需要同一个时间点上线，复刻代码的代码的时机存在问题，如果复刻的过早，如果提测阶段大陆版本有bug, 那么就需要修改两份bug， 如果复刻的过晚那么会存在港台版本测试时间不足，也易导致问题发生。
简繁体转换，都是将简体手动复制到谷歌翻译网页端中翻译好，再手动替换，繁琐且工程量大， 登录方式需要单独的复制一份。
登录方式的不同， 大陆主要是用账号密码登录，而港台使用谷歌、脸书、苹果登录
价格、单位不同，￥ 与 NT$
汉字的形式不同，中文简体与中文繁体
核心问题在于复刻出一份项目存在的工作量与潜在风险较大，所以需要将两个项目合成一个项目，怎么解决？
如果需要将两个项目合成一个项目，并解决以上分析出来的不同点，那么显而易见，需要有个一标识去区分，那么使用环境变量解决这个问题是非常合适的，以vue项目举例, 可以编写对应的环境变量配置。
大陆版本生产环境：.env
VUE_APP_ENV=prod
VUE_APP_PUBLIC_PATH=/mainland大陆版本开发环境：.env
VUE_APP_ENV=dev
VUE_APP_PUBLIC_PATH=/mainland港台版本开发环境：.env.ht
VUE_APP_ENV=ht
VUE_APP_PUBLIC_PATH=/ht
NODE_ENV=productionpackage.json
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:ht": "vue-cli-service build --mode ht",可以看到这里使用了一个自定义变量 VUE_APP_ENV, 在项目代码中就可以使用 process.env.VUE_APP_ENV 去做区分当前是大陆还是港台了，同时为什么不使用NODE_ENV作为变量，因为该变量往往会有其他用途，如当NODE_ENV设置为production 时，打包时会做一些如压缩等优化操作。
注： 港台版本不做测试环境的区分，因为往往大陆版的逻辑没有问题，港台版的就没有问题，所以只需要基于大陆版开发，港台版只需要最后打包一次即可 **(测试环境可选，只需要多添加一个配置即可)**。
其他注意点： process.env.VUE_APP_ENV通常只能在node环境下才能访问的，但是vue-cli创建项目会自动将.env里的变量注入到运行时环境中，也就是使用一个全局变量存起来，通常是使用webpack的define-plugin插件实现的。
解决了环境变量的问题，接下来的工作就比较好进行了。
将两套登录封装成两个不同的组件，因为登录往往涉及到一些全局状态，项目一般都会使用vuex等全局状态管理工具，所以默认使用vuex储存状态，把整个包含登录逻辑的代码制作成一个项目的基础模板，使用自定义脚手架拉取即可，同时注意使用vuex时，为登录相关的状态，放置到一个module下，这样基于该模板创建项目后, 每个项目的其它状态单独再写module即可，避免修改登录的module。
自定义脚手架：交互式创建项目，输入一些选项，如项目名称，项目描述之类的，再从gitlab等远程仓库拉取已经写好的模板，将模板中的一些特定变量，使用模板引擎将模板中的项目名称等替换，最终产生一个新的项目。（脚手架还有其他用途，这里只描述使用它创建一个简单的项目）
没有脚手架那就只能使用git clone 下来后再修改项目名称之类的东西，会增加一点额外的工作，但不影响不大。
封装的部分逻辑：
比如大陆的登录组件叫做 mainlandLogin, 港台的登录组件叫 htLogin，再写一个 login组件将他们整合，通过环境变量进行区分引入不同的组件，使用component动态加载对应的登录组件如下：
login.vue:
<component :is="currentLogin" @sure="sure" cancel="cancel"></component>
data:{
return {
currentLogin: process.env.VUE_APP_ENV === 'ht' ? 'mainlandLogin' : 'htLogin'
}
},
components: {
mainlandLogin: () => import("./components/mainlandLogin.vue"),
htLogin: () => import("./components/htLogin.vue"),
},
method:{
sure(){
this.$emit('sure')
},
cancel(){
this.$emit('cancel')
}
}注意： 引入组件的方式使用动态加载，打包时会将两个组件打包成两个单独的chunk
文章浏览阅读8.1k次，点赞2次，收藏2次。1 表单Form概述在Form表单中，参数一般有： action 表单提交的url method 提交方式：post get name 表单的属性名 enctype 提交数据的编码格式2 常见的编码方式与语法在Form表单中，enctype表明提交数据的格式 用 enctype 属性指定将数据回发到服务器时浏览器使..._content-type为application/json时传参为什么会有content-disposition: form-data
文章浏览阅读3.1k次。cm11开发者源码.tar文件大小：9.8G http://pan.baidu.com/share/link?uk=1663710139&shareid=3849829323cm11源码http://pan.baidu.com/s/1i3LzjFZ++++++++++++++++ ?说明0 android4.7z.001 通过7zip将此分卷解开，得到一个a_d_4.7z.001
文章浏览阅读2.4k次，点赞7次，收藏3次。vue3，element-plus，DatePicker日期选择器，el-date-picker，周，type=week，周选择器，日期选择器week怎么拿到具体的时间范围，如何取week周选择器的value值，format如何设置，时间选择器按周选择时展示具体日期范围，vue3 elementPlus日期选择器 选择一周7天的数据格式怎么拿到，el-date-picker设置type等于week后怎么设置format属性，format和value-format怎么设置，范围选择器周，一周，选择一周7天时间_vue3 - element plus 日期选择器 el-date-picker,设置 type=week 变成周选择器后,
文章浏览阅读314次。DOM 简介 节点和属性 事件 文档加载 DOM查询 获取元素节点 获取元素节点的子节点 其他方法 CSS选择器查询节点 DOM增删改 DOM操作CSS内联样式 DOM操作CSS当前样式 DOM操作其他样式的相关属性 事件对象 事件的冒泡Bullbe 事件的委派 事件监听器绑定 addEventListener 事件的传播 滚轮事件 onmousewheel 键盘事件 onkeydown onkeyup BOM window_pagenation.onclick = function (event) { event = window.event || event consol
文章浏览阅读3.8k次。STM32基础概念，STM32的分类，STM32的命名规则_stm中的内核和主频怎么看
文章浏览阅读1.3k次。最近有位win10系统用户在使用电脑的过程当中，碰到了dns错误的情况，用户不知道如何解决，为此非常苦恼，那么win10系统dns错误如何解决呢?下面为大家分享win10电脑dns错误的解决方法。第一步：使用 ipconfig /flushdns 命令刷新DNS解析缓存1、右键点击系统桌面左下角的【开始】，在开始的右键菜单中点击【命令提示符(管理员)】;如图所示： 2、复制ipconfig /flushdns命令，在打开的管理员命令提示符窗口中，右键单击空白处，将ipconfig /f..._win10的dohs老是错误
文章浏览阅读155次。更多视频,JAVA收徒QQ:9871158853.全套JAVA教程--JavaEE必备 Git&GitHUP视频教程 视频.zip 资料.zip Hibernate视频教程 1. _Hibernate_概述&安装 Hibernatetools 插件.wmv 10. _Hibernate_详解 Hibernate 映射文件(2).wmv ._deferredresult源码分析视频教程
文章浏览阅读291次。广义后缀自动机，求多个串的本质不同子串个数。回文自动机求回文串个数#include<bits/stdc++.h>using namespace std;const int maxn = 4e5+100;char s[maxn];int len;int T;int n,m;struct SAM{ int last,cnt,nxt[maxn*2][26]..._广义回文自动机
文章浏览阅读131次。目录1、LVS-DR数据包流向分析2、LVS-DR中的ARP问题3、解决ARP的两个问题的设置方法1、LVS-DR数据包流向分析■ 为方便进行原理分析，将Client与群集机器放在同一网络中，数据包流经的路线为1-2-3-4■ Client向目标VIP发出请求，Director (负载均衡器)接收● IP包头及数据帧头信息■ Director根据负载均衡算法选择RealServer_1，不修改也不封装IP报文，而是将数据帧的MAC地址改为RealServer_1的MAC地址，然后在局域网上发送●_lvs-dr 群集
文章浏览阅读207次。Linux ps 命令Linux ps (英文全拼：process status)命令用于显示当前进程的状态，类似于 windows 的任务管理器。语法ps [options] [--help]参数：ps 的参数非常多, 在此仅列出几个常用的参数并大略介绍含义-A 列出所有的进程-w 显示加宽可以显示较多的资讯-au 显示较详细的资讯-aux 显示所有包含其他使用者的行程au(x) 输出格式 :U..._linux命令rsss?
文章浏览阅读938次。相信玩抖音的朋友应该都有过这样的疑问，为什么别人的视频时间可以拍60s并且还能在主页置顶？而自己的只有短短十来秒还不能置顶视频。一、首先我们来说说抖音怎么拍60s长视频：【个人账号开通抖音长视频权限条件】1. 粉丝1000个以上2. 除了抖音粉丝数量外，已上传的视频也要求内容原创且优质申请流程如下：1. 进入抖音账号后台，点击进入设置界面2. 在设置里面选择..._抖音如何发长视频教程
文章浏览阅读389次。具体而言，卷积码的编码过程是将输入数据和编码器中的状态进行异或操作，输出码字为各个状态对应的结果。Viterbi译码算法是一种最大似然译码算法，根据接收到的含有噪声的码字，寻找出最有可能的原始数据序列。(2) 递推计算：根据接收到的码字和当前状态，计算下一时刻各个状态的路径度量，并记录每个状态的前驱状态。以上代码实现了一个简单的卷积码Viterbi译码算法，通过接收到的码字进行译码，并输出解码结果。(1) 初始化：将所有状态的路径度量初始化为一个很大的值，选择路径度量最小的状态作为起始状态。_卷积码编码c