一、为什么要国际化？
前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 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>
惊喜彩蛋
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>