vue-i18n 的使用_vuei18n

一、安装

安装 Vue-i18n 插件。您可以使用以下命令进行安装：

npm install vue-i18n@next --save

//安装：
npm install vue-i18n@next --save --legacy-peer-deps

added 6 packages, and audited 1051 packages in 41s

158 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
1
2
3
4
5
6
7
8
9
10
11

二、使用

在 src 下创建 lang 文件夹。

1、准备语言包

本例我准备了两种语言包，分别是中文和英文：cn、en。在 lang 下创建两个文件，cn.js 和 en.js。

在cn.js文件中，可以定义以下内容：

export default {
  message: {
     hello: '你好、世界',
     name: '你好、{name}，欢迎来到{place}',
     apple: '没有苹果 | 一个苹果 | {count}个苹果',
     banana:'没有香蕉 | {n}香蕉 - ¥{n} | {n}香蕉 - ¥{n}'
  }
}
1
2
3
4
5
6
7
8

在en.js文件中，可以定义以下内容：

export default {
  message: {
    hello: 'hello world',
    name: 'hello {name}, welcome to {place}',
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana - ¥{n} | {n} bananas - ¥{n}'
  }
}
1
2
3
4
5
6
7
8

2、准备翻译的语言环境

在 lang 下创建 index.js，使用如上的两种语言包。

import { createI18n } from 'vue-i18n'
import en from '.en.js'
import cn from '.cn.js'

const i18n = createI18n({
  locale: 'en', // 设置当前语言为英语
  messages: {
    en: en, // 将英语语言文件添加到Vue-i18n实例中
    cn: cn // 将中文语言文件添加到Vue-i18n实例中
  }
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13

3、实现语言翻译

在 main.js 中将 i18n 注入 vue 中

import i18n from './lang'

const app = createApp(App)
app.use(i18n)

app.use(store).use(router).mount('#app')
1
2
3
4
5
6

4、使用方式

在组件中使用文本和翻译。可以使用 $t 方法来获取文本和翻译。例如在模板中，可以使用以下方式显示文本：

<p>{{ $t('message.hello') }}</p>
1

还可以使用$t方法来获取带有占位符的文本，例如：

<p>{{ $t('message.name', { name: 'Alice', place: "Vue" }) }}</p>
1

这将根据当前语言环境显示带有占位符的文本，并将占位符替换为name属性中的值。

$tc 用于复数，例如英文一般分单复数

<p>{{ $tc('message.apple', 0) }}</p>
<p>{{ $tc('message.apple', 1) }}</p>
<p>{{ $tc('message.apple', 2) }}</p>

<p>{{ $tc('message.banana', 0) }}</p>
<p>{{ $tc('message.banana', 1) }}</p>
<p>{{ $tc('message.banana', 5) }}</p>
1
2
3
4
5
6
7

效果如下:

5、动态改变语言

添加按钮

<button @click="changeLang">切换语言</button>
1

添加方法

<script>
export default {
  methods: {
    changeLang() {
      if(this.$i18n.locale === 'cn'){   // 判断当前语言
        this.$i18n.locale = 'en'   // 设置当前语言
      } else {
        this.$i18n.locale = 'cn'
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

6、绑定 data 变量

添加显示和按钮

<p>{{$tc(`message.${fruit}`, 2)}}</p>
<button @click="changeFruit">切换水果</button>
1
2

添加 data 变量

data() {
    return {
      fruit:'apple'
    }
  },
1
2
3
4
5

添加方法

	changeFruit() {
      if(this.fruit === 'apple'){
        this.fruit = 'banana'
      } else {
        this.fruit = 'apple'
      }
    }
1
2
3
4
5
6
7

7、整合 ElementUI 语言包

• 扩展中文

// import cnLocale from 'element-ui/lib/locale/lang/zh-CN'   //引入element语言包
import cnLocale from 'element-plus/lib/locale/lang/zh-cn'
export default {
    message: {
        hello: '你好、世界',
        name: '你好、{name}，欢迎来到 {place}',
        apple: '没有苹果 | 一个苹果 | {count}个苹果',
        banana:'没有香蕉 | {n}香蕉 - ¥{n} | {n}香蕉 - ¥{n}'
    },
    ...cnLocale
}
1
2
3
4
5
6
7
8
9
10
11

• 扩展英文

import enLocale from 'element-plus/lib/locale/lang/en'   //引入element语言包
export default {
    message: {
        hello: 'hello world',
        name: 'hello {name}, welcome to {place}',
        apple: 'no apples | one apple | {count} apples',
        banana: 'no bananas | {n} banana - ¥{n} | {n} bananas - ¥{n}'
    },
    ...enLocale
}

1
2
3
4
5
6
7
8
9
10
11

• 使用扩展语言

 <p>{{ $t('el.datepicker.today') }}</p>
 <p>{{ $t('el.transfer.filterPlaceholder') }}</p>
1
2

8、v-t 使用

更新使用语言环境信息进行本地化的元素 textContent。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：

path：必填，语言环境信息的关键字
locale：可选，语言环境
args：可选，用于列表或命名格式

• 使用

<!-- 字符串语法：字面量 -->
<p v-t="'message.hello'"></p>

<!-- 对象语法： 字面量 -->
<p v-t="{ path: 'message.name', locale: 'en', args: { name: 'kazupon', place: 'Vue2' } }"></p>
1
2
3
4
5

• 绑定 data 变量

//添加 data 变量
data() {
    return {
      fruit: 'apple',
      fruit2: 'message.apple',
      greeting: 'message.name',
      fullName: 'zhangsan'
    }
  }

<!-- 字符串语法：通过数据或计算属性绑定 -->
<p v-t="fruit2"></p>

<!-- 对象语法： 通过数据或计算属性绑定 -->
<p v-t="{ path: greeting, args: { name: fullName, place: 'Vue3' } }"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• v-t 和 $t()进行比较
  v-t 性能更好，但是使用更复杂
  $t() 更灵活，但是每次重新渲染时都会被执行，影响性能。