Vue3使用vue-i18n实现国际化

今天, 我们就来实现一下国际化

我先让大家看一下demo, 大家可以直接搜索下方链接进行观看, 也可以点击底部查看原文进行demo观看

https://lv-zirui.gitee.io/internationalization

我也将这份demo代码, 放到了仓库, 地址会放在留言区, 感兴趣可以拉下来, 学习一下

首先, 我们需要安装一下vue-i18n插件

安装完成之后, 需要我们在src目录下创建一个文件夹, 名为locale, 在该文件夹下创建一个index.ts和lang文件夹, 大概目录格式如下

在lang文件夹下的文件, 需要我们将各种语言配置好, 我截取一下大概配置

现在, 我们写index.ts部分

在这个文件中, 我们主要做了什么呢?其实在这里面, 我们主要是配置了国际化, 并将配置好的进行了导出

第一步, 我们需要将createI18n进行导入

import { createI18n } from ‘vue-i18n’
导入之后, 我们还需要将我们lang文件中的文件进行导入

import zhCN from ‘./lang/zh-CN’ // 中文
import enUS from ‘./lang/en-US’ // 英文
import ptBR from ‘./lang/pt-BR’ // 西班牙语
import ja from ‘./lang/ja’ // 日语
导入完成之后, 我们创建一个变量, 用于优先设置哪国语言

const defaultLocale = localStorage.getItem(‘locale’) || ‘en-US’;
剩下的就是创建国际化i18n并导出了

const i18n = createI18n({
locale: defaultLocale,
legacy: false,
messages: {
‘zh-CN’: zhCN,
‘en-US’: enUS,
‘pt-BR’: ptBR,
‘ja’: ja
}
})

export default i18n
我们先将该文件在main.ts中进行导入并挂载app应用实例身上

import i18n from ‘@/locale’

app.use(i18n)
这样, 我们基本上就成功一大半了

现在, 我们还需要在index.ts中导出一个数组, 用于我们后面的下拉选择

export const LOCALE_OPTIONS = [
{ label: ‘中文’, value: ‘zh-CN’ },
{ label: ‘英文’, value: ‘en-US’ },
{ label: ‘西班牙语’, value: ‘pt-BR’ },
{ label: ‘日语’, value: ‘ja’ }
];
我们在App.vue组件上进行导入

import { LOCALE_OPTIONS } from ‘./locale/index’
并使用element-plus的下拉框组件, 并绑定一个change事件

import { useI18n } from ‘vue-i18n’
import { ref } from ‘vue’
const locales = ref(localStorage.getItem(‘locale’) || ‘en-US’);
// 切换
const { locale, t } = useI18n()
const setChange = (val: any) => {
// 往本地存一份
localStorage.setItem(‘locale’, val)
locale.value = val
}
这样, 我们下拉框就写完了

我们将选择语言的时候, 往本地存一份, 这样刷新就不会丢失了, 利用短路优先获取本地存的语言

使用的时候, 我们只需要使用$t或者t包裹即可

我们看一下效果

这样, 我们的国际化就完成了

如果大家喜欢, 可以去我仓库拉取代码

我们下期见