安装vue-i18n
npm install vue-i18n@8 --save
这里是安装版本 8.x，根据项目可以安装版本9.x，不过引入时有区别。从vue-i18n v9 开始，不再提供默认导出（default export）。
创建国际化配置文件
创建一个文件夹用于存放你的语言资源文件，比如 src/i18n/。
然后创建不同语言的 JSON 文件，例如 zh.json 和 en.json
// zh.json
{
"welcome": "欢迎",
"goodbye": "再见"
}
// en.json
{
"welcome": "Welcome",
"goodbye": "Goodbye"
}
设置vue-i18n
安装版本 8.x，在你的项目入口文件（通常是 main.js）中设置 vue-i18n
import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'
// 导入语言文件
import zh from './i18n/zh.json'
import en from './i18n/en.json'
Vue.use(VueI18n) // 注册插件
// 创建 i18n 实例并配置语言
const i18n = new VueI18n({
locale: 'zh', // 设置默认语言
messages: {
zh,
en
}
})
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n, // 挂载 i18n 实例
...App
})
app.$mount()
在组件中使用
现在你可以在组件中使用 $t 方法来访问翻译字符串：
<template>
<view class="container">
<text>{{ $t('welcome') }}</text>
<button @click="changeLanguage">切换语言</button>
</view>
</template>
<script>
export default {
methods: {
changeLanguage() {
// 切换语言
const newLocale = this.$i18n.locale === 'zh' ? 'en' : 'zh'
this.$i18n.locale = newLocale
}
}
}
</script>
<style scoped>
.container {
text-align: center;
margin-top: 20px;
}
</style>
切换语言
通过 this.$i18n.locale 可以动态切换语言，在用户点击按钮或其他事件时进行语言切换。
版本区别
1、版本兼容性
Vue版本:
vue-i18n 8.x 是为 Vue 2 设计的。
vue-i18n 9.x 是为 Vue 3 设计的。
2、API 和使用方式
初始化方式:
8.x:
使用 Vue.use() 来注册插件，并通过构造函数创建 VueI18n 实例。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
legacy: true, // 启用 Options API 支持
locale: 'en',
messages: {
en: { message: 'hello' },
zh: { message: '你好' },
}
})
9.x:
使用 createI18n 函数来创建 i18n 实例，符合 Vue 3 的 API 设计方式。
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
const i18n = createI18n({
legacy: false, // 设置为 false 使用 Composition API 模式
locale: 'en',
messages: {
en: { message: 'hello' },
zh: { message: '你好' },
}
})
const app = createApp(App)
app.use(i18n)
app.mount('#app')
Composition API 支持:
8.x: 基于选项式 API，没有原生支持 Composition API。
9.x: 支持 Composition API，通过 useI18n 来获取 i18n 实例。
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t } = useI18n()
return { t }
}
}
性能优化:
9.x: 对性能进行了优化，特别是对于 Vue 3 的响应式系统，处理变更更加高效。
TypeScript 支持:
9.x: 提供了更好的 TypeScript 支持，类型定义更加完善。
插件结构:
9.x: 重构了插件结构，使用更符合现代 JavaScript 模块化的方式。
原创文章，作者：czhdawn，如若转载，请注明出处：https://www.czhdawn.cn/archives/4792
