Vue3 项目 i18n 国际化落地方案

扒财

已于 2025-02-14 18:00:13 修改

阅读量293

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-02-12 09:36:29 首次发布

本文链接：https://blog.youkuaiyun.com/dalaojiyun/article/details/145576696

背景介绍：

最近负责管理后台项目有国际化的需求，遂调研了一下，小试牛刀。既然是国际化，那就绕不开 i18n ，下文也将根据 i18n 进行叙述。

今天主要分享一下 Vue3(3.5) 前端部分适配 i18n 流程，目前还没有遇到坑，所以我会持续更新...

安装

npm install vue-i18n@next

引用

import { createI18n } from 'vue-i18n'
import i18nOptions from './locales'

const i18n = createI18n(i18nOptions)

app.use(i18n)

创建实例

1、src目录下新增 locales 文件夹

2、新增index.ts文件，如下：

import type { createI18n, I18nOptions } from 'vue-i18n'
import en from './en.json'
import zh from './zh.json'
import zhtw from './zhtw.json'

export interface MessageSchema {
  [key: string]: any
}

const messages: Record<string, MessageSchema> = {
  en,
  zh,
  zhtw,
}

const i18nOptions: I18nOptions = {
  locale: 'zh',
  fallbackLocale: 'zh',
  messages,
}

export default i18nOptions

3、新增en.json\zh.json文件，如下：

{
  "searchItemList": {
    "企业名称": "Business Name",
    "企业类型": "Business Type",
    "简称": "abbreviation",
    "所在城市": "city",
    "状态": "status"
  },
  "searchButttonList": {
    "query": "search",
    "clear": "clear",
    "add": "add"
  },
  "tableTitleList": {
    "title": "Query Result",
    "noTotal": "No data found",
    "total": "There are a total of {total} pieces of data"
  },
}

4、使用，如下：

$t(`searchButttonList.${value.event}`)

或

$t('tableTitleList.total', { total: pageData.total }) // 传参

5、修改App.vue，如下：

<el-config-provider :locale="localei18n">
、、、
</el-config-provider>

import zhCn from 'element-plus/es/locale/lang/zh-cn' // 中文
import enCn from 'element-plus/es/locale/lang/en' // 英文
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();

const localei18n = computed(() =>
  locale.value === 'en' ? enCn : zhCn
)

至此，一个简单高效的vue3国际化实例已经完成，接下来还有很长的路要走。

一更到此，敬请期待...

20250214 美好的情人节，迎来了盛大的二更。。。。

使用中遇到了一个小问题：JSON字符串中包含竖线 |，这个时候直接取出来是不对的。

    "inputModelText": "快捷录入模版,例如: [左|右|双]即为3项目",
    "inputModelText3": "项（填写数字，默认2项）",
    "inputModelText4": "样式: [ | ]",
    "inputModelText6": "样式: [ ? ]",
    "inputModelText8": " 项（填写数字，默认2项）",
    "inputModelText9": "样式: { & }"

回显的时候，JSON字符串中包含竖线 | 无法显示。其它正常

各种转译字符也都试了，未生效，最后只能采用 replace 替换了。

有谁遇到过，并转译成功的，还希望分享一下