当前位置：首页 > article >正文

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

article 2024/10/28 14:36:58

国际化大家都知道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', // 编译入口文件夹,默认是 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文件末尾，还会自动去重