定制化开发vue中i18n的安装和几种和使用方式

介绍 Vue I18n 是 Vue.js 定制化开发的国际化插件。定制化开发它可以轻松地将一些本定制化开发地化功能集成到你的 Vue.js 定制化开发应用程序中。
1、在项目中安装i18n

npm install vue-i18n
1

2、如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 ：

import Vue from 'vue' import VueI18n from 'vue-i18n'  Vue.use(VueI18n)
1
2
3

项目中的使用
我们在项目中最多的是通过标签切换来转换语言的显示，
locale是控制显示语言的配置
this.$i18n.locale=‘cn’

下面是完整的代码
文件夹路径

创建i18n文件夹放入你需要的语言和index.js文件
index代码

import VueI18n from 'vue-i18n'import Vue from 'vue'//引入element的语言包import localeLib from 'element-ui/lib/locale'  //本地import enLocale from "element-ui/lib/locale/lang/en"; //英文import zhLocale from "element-ui/lib/locale/lang/zh-CN";  //中文// 引入需要语言包也可是js文件，export default抛出语言包的对象import en from './lang/saas-en.json'import zh from'./lang/saas-zh-CN.json'Vue.use(VueI18n)//获取本地选择的语言var lang =  Cookie.get("bx_user_lang") ||  navigator.language ||  navigator.userLanguage ||  "en";const i18n = new VueI18n({  locale: lang, // 语言标识  fallbackLocale: 'zh-CN',   silentTranslationWarn: true,// 设置为true 会屏蔽翻译在控制台报出的警告  messages: {    en: Object.assign(en, enLocale),    "zh-CN": Object.assign(zh, zhLocale)  }})// 设置语言localeLib.i18n((key, value) => i18n.t(key, value))export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

main.js

import i18n from './i18n/i18n'; /* eslint-disable no-new */new Vue({    el: '#app',    router,    store,    i18n, //很重要，别忘记    components: { App },    template: '<App/>'})
1
2
3
4
5
6
7
8
9
10

使用方式 组件里使用

<template>    <div>        <span>{{$t('message.text')}}</span> //使用方式1        <p>{{title}}</p> //使用方式3        <span v-text="$t('message.text')"></span>//使用方式2        <el-select @change="langChange" placeholder="请选择语言">            <el-option v-for="item in options"                :key="item.value"                :label="item.label"                :value="item.value">            </el-option>        </el-select>    </div></template> <script>export default {    data () {        return {            title:this.$t('message.text'),            options:[                { value: 'cn', label: '中文' },                { value: 'en', label: 'English' }            ]        }    },    methods: {        //语言切换        langChange(e){            localStorage.setItem('lang',e);            this.$i18n.locale = e;            window.location.reload()        }    }}</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

使用方式js
vue3中在页面js使用有点不同 $t() 会挂载到proxy上，在js中使用proxy.$t()

 // 删除人员      const delMenu = async (row) => {         await deletePerson(row)         proxy.$message.success(proxy.$t("person.message.success.delete"))               }
1
2
3
4
5
6

如果组件里没有proxy呢
先定义一个转换的方法translateTitle()

创建一个i18n.ts,写入下面代码，返回一个translateTitle

import i18n from "@/i18n";export function translateTitle(title: string) {    const { t, te } = i18n.global    if (te(`${title}`)) return t(`${title}`)    return title;}
1
2
3
4
5
6
7

组件中使用,方法还是一样，是用自己定义的方法translateText，代替了proxy.$t.代码如下

import { translateText } from "@/utils/i18n" //在组件中引入import { ElMessage } from 'element-plus'const tots=()=>{	ElMessage.success(translateText('person.message.success'))}
1
2
3
4
5

最后附上官方文档的地址
https://kazupon.github.io/vue-i18n/zh/