1.下载依赖包
// package.json
"dependencies": {
"vue-i18n": "^9.2.2",
},
yarn 安装
2. 在src目录下新建目录结构
3. locales/lang/*.js
// zh.js
const zh = {
messages: {
welcome: '欢迎',
}
}
export default zh
// en.js
const en = {
messages: {
welcome: 'Welcome'
}
}
export default en
// ru.js
const ru = {
messages: {
welcome: 'Добро пожаловать'
}
}
export default ru
3. locales/index.js
import en from './lang/en'
import zh from './lang/zh'
import ru from './lang/ru'
export default {
en, zh, ru
}
4. locales/i18n.js
import { createApp } from 'vue'
import App from '../App.vue'
import { createI18n } from 'vue-i18n'
import messages from './index'
const app = createApp(App)
const i18n = createI18n({
legacy: false,
locale: localStorage.getItem('lang') || "zh", // 当前环境默认语言
messages
})
export default function (app) {
app.use(i18n)
}
5. main.js
// 国际化
...
import I18n from './locales/i18n'
....
app.use(I18n)
基本配置已完成
6 .使用
··6.1 模板中使用
// 模板中使用不需要导入任何模块
<div>
{{ $t('messages.welcome') }}
</div>
6.2 script中使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n();
console.log(t('messages.welcome'))
7 切换语言
import { useI18n } from 'vue-i18n'
export function handleSetLang(lang) {
const { locale } = useI18n()
locale.value = lang //lang = 'zh|ru|en'
}