国际化大家都知道vue-i18n 实现的，但是有个问题，就是繁杂的抽离中文字符的过程，以及翻译中文字符的过程，关于这个有些小工具可以希望可以帮到大家
1.安装vue-i18n
npm i vue-i18n@8.22.22.ElementUI多语言配置
在src目录下创建文件夹lang以及index.js
|- src
|-lang
|-index.js
|-th.json # 从资源包中拷入的
|-zh.json # 从资源包中拷入的/src/lang/index.js文件内容如下
javascript
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
javascript
{
"复制成功": "复制成功",
"泰文名称": "泰文名称",
"个人中心": "个人中心",
"分配用户": "分配用户",
"规则组成": "规则组成",
"库区设置": "库区设置",
"使用甘特图排产": "使用甘特图排产",
"修改生成配置": "修改生成配置",
"出厂检验": "出厂检验",
"库位设置": "库位设置",
"分配角色": "分配角色"
}/src/lang/th.json
javascript
{
"复制成功": "คัดลอกสำเร็จ",
"泰文名称": "ชื่อภาษาไทย",
"个人中心": "ศูนย์ส่วนบุคคล",
"分配用户": "กำหนดผู้ใช้",
"规则组成": "องค์ประกอบของกฎ",
"库区设置": "การตั้งค่าพื้นที่ห้องสมุด",
"使用甘特图排产": "ใช้ Gantt Diagram เพื่อขับไล่การผลิต",
"修改生成配置": "แก้ไขการกำหนดค่าการสร้าง",
"出厂检验": "การตรวจสอบโรงงาน",
"库位设置": "การตั้งค่าไลบรารี",
"分配角色": "กำหนดบทบาท"
}3.在main.js中挂载 i18n的插件
javascript
import i18n from '@/lang'
// 加入到根实力配置中
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})4.配置完成之后使用
在想要使用多语言的页面，用t('属性名')来生成标题。这里的t是引入了i18n之后，自动挂载在vue实例上的功能。在script上使用this.t
javascript
<div class="dashboard-editor-container">
{{ $t('navbar.welcomes') }} {{ $t('navbar.companyName') }}
</div>在js模块使用
javascript
import i18n from './lang/index'
export function tob () {
return i18n.t('检测到有新版本！')
}5 抽离中文字符
使用vscode 插件 vue-i18n-transform
在项目根目录创建vue-i18n-transform.config.js
javascript
module.exports = {
entry: 'src', // 编译入口文件夹,默认是 src
outdir: 'src/lang', // i18n 输出文件夹 默认是 src/locales
exclude: ['src/lang/th.json'], // 不重写的文件夹, 默认是 ['src/locales']
extensions: ['.vue'], // 重写的文件类型，默认是 ['.js', '.vue', '.ts']
single: false, // 是否为单文件编译, 默认为 false. 如果为 true, 则 entry 需为文件而不是文件夹, 如 entry: 'src/index.vue'
filename: 'zh', // 输入的中文 json 文件名,默认为 zh_cn
useChineseKey: true // 是否使用中文作为key值，默认为false
}在文件鼠标右键有个transformFile i18n的选项，点击之后就会自动抽离，自动追加到zh.json文件末尾，还会自动去重
另外他也有一个node组件
javascript
npm i vue-i18n-transform -D支持整个项目一键抽离中文
javascript
npx vue-i18n-transform6 将中文翻译成泰文，可以使用chatGPT 翻译，很好用，不用一个个翻译，也不用安装一堆插件，还要配百度翻译key
