今天, 我们就来实现一下国际化
我先让大家看一下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包裹即可
我们看一下效果
这样, 我们的国际化就完成了
如果大家喜欢, 可以去我仓库拉取代码
我们下期见
