提升多语言体验：使用vue-i18n-transform优化Vue应用的国际化功能
最编程
2024-01-12 09:26:58
...
背景
现有的庞大 Vue 项目突然要进军海外了，原本一开始就没有做多语言适配的准备，面对这么多文件的中文替换多语言变量的工作确实有些头疼。参考网上的一些案例和做法，我写了一款 vue 文件批量转化多语言插件————vue-i18n-transform
原理
vue-i18n-transform 其实是一款发布在 npm 的 node 插件, 通过对文件操作，获取文本内容后使用正则对中文进行文本替换后再重写文件实现，同时支持对 vue,js,ts 文件的中文替换。
使用
- 安装vue-i18n-transform依赖
npm i vue-i18n-transform -D- 编写配置文件
以下是默认配置, 当然你也可以在项目文件夹下创建 vue-i18n-transform.config.js 文件, 按下面的配置修改你的自定义配置
module.exports = {
entry: 'src', // 编译入口文件夹,默认是 src
outdir: 'src/locales', // i18n 输出文件夹 默认是 src/locales
exclude: ['src/locales'], // 不重写的文件夹, 默认是 ['src/locales']
extensions: ['.vue', '.js', '.ts'], // 重写的文件类型，默认是 ['.js', '.vue', '.ts']
single: false, // 是否为单文件编译, 默认为 false. 如果为 true, 则 entry 需为文件而不是文件夹, 如 entry: 'src/index.vue'
filename: 'zh_cn' // 输入的中文 json 文件名,默认为 zh_cn
}- 一键转化
npx vue-i18n-transform实现效果
本插件的语言变量名是以目录文件名 + 下划线 + 索引的方式命名，如“filename_1” 或者 “src_views_index_1”
<!-- 替换前 -->
<i :class="{ selected: tabactiveName === 1 }" @click="handleTabClick(1)">
<span>效果图</span>
</i>
<!-- 替换后 -->
<i :class="{ selected: tabactiveName === 1 }" @click="handleTabClick(1)">
<span>{{$t('filename_1')}}</span>
</i>