Vue3 + TS 使用国际化组件I18n

因为最近有个项目准备提供多个语言切换，需要用到I18n插件，根据不同国家语言进行切换，便于不同国家的用户使用，哈哈，I18n，听说这个名字是因为本来名称是internationalization，但是太长了有20个字母，就取了头尾两个字母，剩下中间18个字母，取名为I18n，实在有点离谱。。

一、安装vue-i18n插件

// 使用 npm
npm install vue-i18n@9 
// 使用 yarn
yarn add vue-i18n@9

二、定义需要的语言包

//src/language/en.ts
//定义英文语言包对象
export default {
  navigateBar: {
    hotspot: 'Hotspot',
    experience: 'Experience',
    focus: 'Focus',
    recommend: 'Recommend'
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like'
  }
}

//src/language/zh.ts
//定义中文语言包对象
export default {
  navigateBar: {
    hotspot: '热点',
    experience: '经验',
    focus: '关注',
    recommend: '推荐'
  },
  tabs: {
    work: '作品',
    private: '秘密',
    collect: '收藏',
    like: '喜欢'
  }
}

三、在main.ts里面组合语言包

//main.ts
import en from './language/en'
import zh from './language/zh'

const messages = {
	en,zh
}

四、在main.ts中引入插件创建i18n实例

import { createI18n } from 'vue-i18n';
const i18n = createI18n({
  legacy: false,  // 设置为 false，启用 composition API 模式
  messages,
  locale: 'en'  // 设置默认语言
})

！注意：在创建实例时，一定要将 legacy 属性设置为 false，因为 legacy 默认为 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要将此属性手动设置为 false。

五、挂载实例对象

import { createApp } from 'vue';
const app = createApp(App);
app.use(i18n);

六、当前main.ts代码

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './langurage/en';
import zh from './langurage/zh';
 
// 组合语言包对象
const messages = {
  en,
  zh
}
 
// 创建实例对象
const i18n = createI18n({
  legacy: false,  // 设置为 false，启用 composition API 模式
  messages,
  locale: 'en'
})
 
// 创建 Vue 实例
createApp(App).use(i18n).mount('#app');

七、在组件中使用

<template>
    <div>
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
    <div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const {t} from useI18n

//如果你跟我一样在组件中使用了setup函数，确保使用了useI18n API来接收i18n配置。
</script>

八、添加动态切换中英文语言按钮

<template>
    <div class="language">
    <div>
      <button @click="changeLocale('zh')">切换为中文</button>
      <button @click="changeLocale('en')">切换为英文</button>
    </div>
    <div class="main">
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
      </div> 
    <div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n
const { locale } = useI18n()
const changeLocale = (lang) => {
  locale.value = lang
}
</script>

<style lang="scss" scoped>
.language {
  margin: 0 auto;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    ul {
      margin-right: 50px;
    }
  }
}
</style>