vue 项目i18n国际化，快速抽离中文，快速翻译

国际化大家都知道vue-i18n 实现的，但是有个问题，就是繁杂的抽离中文字符的过程，以及翻译中文字符的过程，关于这个有些小工具可以希望可以帮到大家

1.安装vue-i18n

npm i vue-i18n@8.22.2

2.ElementUI多语言配置

在src目录下创建文件夹lang以及index.js

    |- src|-lang|-index.js|-th.json # 从资源包中拷入的|-zh.json # 从资源包中拷入的

/src/lang/index.js文件内容如下

import Vue from "vue";
import VueI18n from "vue-i18n";
// 引入自定义语言
import zh from "./zh.json";
import th from "./th.json";
// 引入element框架语言
import ElementLocale from "element-ui/lib/locale";
import thLocale from "element-ui/lib/locale/lang/th";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";ElementLocale.i18n((key, value) => i18n.t(key, value));
Vue.use(VueI18n);
// 准备翻译的语言环境信息
const i18n = new VueI18n({locale: localStorage.getItem("lang") || "zh", //将语言标识存入localStorage或sessionStorage中，页面刷新不会默认中文显示messages: {// 中文语言包zh: {...zh,...zhLocale,},//泰文语言包th: {...th,...thLocale,},},silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略globalInjection: true, // 全局注入fallbackLocale: "zh", // 指定的locale没有找到对应的资源或当前语种不存在时，默认设置当前语种为中文
});export const langs = [{ value: 'zh', label: '中文' },{ value: 'th', label: 'ภาษาไทย' }
]export const getLocaleText = (lang) => {return langs.find(item => item.value == lang).label
}export const setLocal = (lang) => {localStorage.setItem('lang', lang)i18n.locale = lang
}export default i18n;

/src/lang/zh.json

{"复制成功": "复制成功","泰文名称": "泰文名称","个人中心": "个人中心","分配用户": "分配用户","规则组成": "规则组成","库区设置": "库区设置","使用甘特图排产": "使用甘特图排产","修改生成配置": "修改生成配置","出厂检验": "出厂检验","库位设置": "库位设置","分配角色": "分配角色"
}

/src/lang/th.json

{"复制成功": "คัดลอกสำเร็จ","泰文名称": "ชื่อภาษาไทย","个人中心": "ศูนย์ส่วนบุคคล","分配用户": "กำหนดผู้ใช้","规则组成": "องค์ประกอบของกฎ","库区设置": "การตั้งค่าพื้นที่ห้องสมุด","使用甘特图排产": "ใช้ Gantt Diagram เพื่อขับไล่การผลิต","修改生成配置": "แก้ไขการกำหนดค่าการสร้าง","出厂检验": "การตรวจสอบโรงงาน","库位设置": "การตั้งค่าไลบรารี","分配角色": "กำหนดบทบาท"
}

3.在main.js中挂载 i18n的插件

import i18n from '@/lang'// 加入到根实力配置中
new Vue({el: '#app',router,store,i18n,render: h => h(App)
})

4.配置完成之后使用

在想要使用多语言的页面，用$t(‘属性名’)来生成标题。这里的t是引入了i18n之后，自动挂载在vue实例上的功能。在script上使用this.$t

<div class="dashboard-editor-container">{{ $t('navbar.welcomes') }} {{ $t('navbar.companyName') }}
</div>

在js模块使用

import i18n from './lang/index'
export function tob () {return i18n.t('检测到有新版本！')
}

5 抽离中文字符

使用vscode 插件 vue-i18n-transform

在项目根目录创建vue-i18n-transform.config.js

module.exports = {entry: 'src', // 编译入口文件夹,默认是 srcoutdir: 'src/lang', // i18n 输出文件夹 默认是 src/localesexclude: ['src/lang/th.json'], // 不重写的文件夹, 默认是 ['src/locales']extensions: ['.vue'], // 重写的文件类型，默认是 ['.js', '.vue', '.ts']single: false, // 是否为单文件编译, 默认为 false. 如果为 true, 则 entry 需为文件而不是文件夹, 如 entry: 'src/index.vue'filename: 'zh', // 输入的中文 json 文件名,默认为 zh_cnuseChineseKey: true // 是否使用中文作为key值，默认为false}

在文件鼠标右键有个transformFile i18n的选项，点击之后就会自动抽离，自动追加到zh.json文件末尾，还会自动去重