【Vue I18n 国际化插件】vue3 vue-i18n 项目实战总结

一、为什么要国际化？

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

二、插件基本思路

定义语言包：需要几种语言展示，就定义几个语言包。
组合语言包对象：创建对象，对语言包进行组合，对象的 key 为语言包引用，值为语言包对象。
创建实例：创建 vue-i18n 类的对象，添加 message 和 locale 属性。
挂载：挂载创建的实例对象。

三、插件版本适用框架

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网，以下内容均在 Vue3 中使用。

四、项目实战

1、安装插件 vue-i18n

npm install vue-i18n --save

或

yarn add vue-i18n --save

2、创建文件，进行相关配置

1.在 src 目录下，新建 i18n 文件夹 2.在 i18n 文件夹中，新建 lang 文件夹(en.ts 、zh-cn.ts)、index.ts 文件
在这里插入图片描述
en.ts

export default {
  home: {
    name: 'home',
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like',
  },
}

zh-cn.ts

export default {
  home: {
    name: '首页',
  },
  tabs: {
    work: '作品',
    private: '私密',
    collect: '收藏',
    like: '喜欢',
  },
}

index.ts

import { createI18n } from 'vue-i18n'
// 语言包
import zhCn from './lang/zh-cn'
import en from './lang/en'

const i18n = createI18n({
  legacy: false, // 设置为 false，启用 composition API 模式
  locale: sessionStorage.getItem('localeLang') || 'zhCn',
  messages: {
    zhCn,
    en,
  },
})
export default i18n

3、mian.js 引入 i18n 配置文件

import { createApp } from 'vue'
import App from './App.vue'
// i18n
import i18n from '@/i18n/index'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

4、使用 pinia 存储 vue-i18n 全局状态

import { defineStore } from 'pinia'
interface ILanguage {
  language: string
}

export const useLangStore = defineStore('lang', {
  state: (): ILanguage => {
    return {
      language: sessionStorage.getItem('localeLang') || 'zhCn',
    }
  },
  actions: {
    changeLang(data: 'zhCn' | 'en') {
      this.language = data
    },
  },
  persist: true,
})

5、定义一个中英文切换的组件，在需要展示的父组件中引入即可

<script setup lang="ts">
import { langType } from '@/enum/options'
import { useLangStore } from '@/store/modules/lang'
import { getCurrentInstance } from 'vue'

const store = useLangStore()
const { proxy } = getCurrentInstance() as any
const handleCommand = (value: 'zhCn' | 'en') => {
  if (store.language === value) return
  proxy.$i18n.locale = value
  store.changeLang(value)
  ElMessage.closeAll()
  ElMessage.success(`${value === 'en' ? '英文' : '中文'}切换成功！`)
}
</script>

<template>
  <el-dropdown @command="handleCommand" class="lang-warp">
    <span class="el-dropdown-link">
      {{ langType[store.language] }}
      <el-icon>
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zhCn">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.lang-warp{
  margin: 0 20px;
}
</style>

6、在对应的组件中使用定义的语言类型

<template>
  <div>
    <div> {{ $t('home.name') }}</div>
    <div> {{ $t('tabs.work') }}</div>
    <div> {{ $t('tabs.private') }}</div>
    <div> {{ $t('tabs.collect') }}</div>
    <div> {{ $t('tabs.like') }}</div>
    <br/>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
</template>

在这里插入图片描述

五、在外部的ts文件中使用

import i18n from "@/i18n/index";

const tips = i18n.global.t('name')

惊喜彩蛋

Element Plus 组件默认使用英语，如果你希望跟着中英文切换

<script setup lang="ts">
import { useLangStore } from '@/store/modules/lang'
const store = useLangStore()

// 导入 Element Plus 语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
const lang = {
  zhCn,
  en,
}
</script>

<template>
  <el-config-provider :locale="lang[store.language]">
    <router-view></router-view>
  </el-config-provider>
</template>