Vue3使 I18n 的配置格式化用法教程详解

1.安装

npm install i18n --save

2.新建plugins文件夹和i18n文件

在src目录下新建plugins文件夹，在文件夹新建i18n.ts

import {createI18n} from 'vue-i18n'
import {storageLocal} from '@pureadmin/utils'

function loadMessages() {
    const context = require.context('../i18n', true, /\.ts$/)
    const messages: any = {}

    context.keys().forEach((key) => {
        if (key === './index.ts') return
        const langModule = context(key)
        const lang = langModule.lang
        const name = key.replace(/(\.\/|\.ts)/g, '')
        messages[name] = lang
    })
    return messages
}

const i18n: any = createI18n({
    legacy: false,
    globalInjection: true,
    locale: storageLocal().getItem<StorageConfigs>('responsive-locale')?.locale ?? 'zh',
    fallbackLocale: 'zh',
    messages: loadMessages()
})


i18n.$t = (key: string) => i18n.global.t(key)

export default i18n

3.新建i18n文件夹，并添加en.ts 和 zh.ts

3.1  zh.ts

export const lang = {
    user: '当前用户',
    realTimeRecord: {
        search: '搜索'
    },
    result: {
        addSuccess: '添加成功'
    },
}

3.2  en.ts略

略（格式参考zh.ts）

4.在main.ts挂载使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import i18n from './plugins/i18n'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(i18n)
app.mount('#app')

5.使用

5.1  在template内使用

<el-form-item>
    <el-input :placeholder="$t('realTimeRecord.search')" />
</el-form-item>

也可以直接使用格式化，但是有的编辑器可能会报错，如果vue文件的template标签内使用格式化，建议通过以下方法使用

<script setup lang="ts">
import i18n from "@/plugins/i18n";
</script>
<template>
    <el-form-item>
        <el-input :placeholder="i18n.$t('result.confirmDeleteTemplate1', ['火车'])" />
    </el-form-item>
</template>

5.2  在 <script setup lang="ts">标签内使用

<script setup lang="ts">

import i18n from "@/plugins/i18n";
import {onMounted} from "vue";

onMounted(() => {
    console.log(i18n.$t('realTimeRecord.search'))
})

</script>

5.3.1  格式化用法（如果有需要），要把 i18n.ts 文件里面的i18n.$t方法添加一个形参代码于下：

 i18n.$t = (key: string, msg: string) => i18n.global.t(key,  msg)，

5.3.2  zh.ts 文件添加 confirmDeleteTemplate1 和 confirmDeleteTemplate2

export const lang = {
    user: '当前用户',
    realTimeRecord: {
        search: '搜索'
    },
    result: {
        addSuccess: '添加成功',
        confirmDeleteTemplate1:'确定删除模板 {0} ？',
        confirmDeleteTemplate2:'确定删除模板 {msg} ？',
        hello1: 'hello <br> world',
        hello2: '%{msg} world'
    },
}

5.3.3  使用格式化

列表格式：confirmDeleteTemplate1:'确定删除模板 {0} ？' ，node.viewName 可以是动态参数

i18n.$t('result.confirmDeleteTemplate1', [node.viewName])

其中{0}，是对应使用时候数组的下标来匹配的，此例子0，对应的是 node.viewName ，如果有两个需要传递的字符，就需要再添加一个{1}，confirmDeleteTemplate1:'确定删除模板 {0}{1} ？',同样，使用的时候[...]也需要添加字符

i18n.$t('result.confirmDeleteTemplate1', [node.viewName,'我是第二个参数'])

列表格式也接受类似数组的对象：

i18n.$t('result.confirmDeleteTemplate1', {'0': '数组的对象'})

具名格式：confirmDeleteTemplate2:'确定删除模板 {msg} ？'

i18n.$t('result.confirmDeleteTemplate1', {msg:'具名格式'})

HTML 格式化：

<p v-html="$t('result.hello1')"></p>

支持 ruby on rails 的 i18n 格式

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

5.3.4 也可以根据后端的接口返回错误码与枚举来使用

message: {
   addSuccess: '添加成功',
   saveSuccess: '保存成功', 
   enumerate: {
      "0": "操作成功",
      "1001": "请求参数错误",
      "1002": "主键分配错误",
   }
}

// 接口返回成功，就固定使用 i18n.$t('message.enumerate.0') 
// 否则就根据错误码来显示 i18n.$t(`message.enumerate.${res['err_code']}`)
if (res.state) {
    ElMessage.success(i18n.$t('message.enumerate.0'))
} else {
    ElMessage.warning(i18n.$t(`message.enumerate.${res['err_code']}`))
}

以上方法应该能基本满足开发需求了，如果需要使用更高阶的用法，建议去官网参考学习