Vue3 + Vite使用 vue-i18n

安装

pnpm install vue-i18n@next -D

创建 locales目录，创建index.ts/cn.json/zh.json注册

//index.ts
import type { I18nOptions } from 'vue-i18n';
import en from './en.json';
import zh from './zh.json';
export interface Messages {[key: string]: any;}export const messages: Messages = {en,zh,};// 获取浏览器 || 获取环境变量 || 默认值const langVal = import.meta.env+'' || 'zh';const i18nOptions: I18nOptions = {legacy: false,  // 设置为 false，启用 composition API 模式locale: langVal,fallbackLocale: langVal,messages,};export default i18nOptions;

//cn.json
{"message": {"asd":"eenn"}
}

zh.json
{"message": {"asd":"zzhh"}}

main文件内导入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import { createI18n } from 'vue-i18n';
import i18nOptions from './locales';
const i18n = createI18n(i18nOptions);createApp(App)
.use(i18n)
.mount('#app')

vue 文件使用

// .use(i18n)后，挂载在全局的 $t
$t('message.hello')

修改它

import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
// const useI18nTo = useI18n();
const switchLanguage = (lang) => {console.log(lang)locale.value = lang; // 切换语言console.log(locale)
}

<div>{{ $t('message.asd') }}</div>
<button @click="switchLanguage('en')">English</button>
<button @click="switchLanguage('zh')">中文</button>

重点 重点 重点

• 依赖不要引入错误
• 文件名称不要错了
• 文件后缀不要错了
• 参数配置不要错了
• 去看 vue-i18n 还有啥