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 还有啥