从零开始Vue3+Element Plus后台管理系统(十五)——多语言国际化vue I18n

原创

已于 2023-05-23 08:55:26 修改 · 6.4k 阅读

标签

#vue.js #前端 #javascript

于 2023-05-22 20:55:34 首次发布

本文介绍了如何在Vue3项目中实现国际化，包括使用VueI18n创建多语言环境，设置语言包，处理浏览器默认语言和本地存储的持久化，以及在路由、ElementPlus组件中应用国际化。还提到了i18n-ally插件的配置问题和解决报错的方案。

i18n国际化的内容比较多，写文章的时间也用得比较长，从上周五开始到本周一，断断续续完成了。

虽然实际工作中很多项目都不需要国际化，但是了解国际化的用法还是很有必要的。

i18n

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

Vue I8n 官方文档： https://vue-i18n.intlify.dev/

首先，安装匹配Vue3的vue-i18n

npm install vue-i18n@9

在Vue3中引入i8n

src下新建文件夹locales，其下新建入口文件index.ts和两个语言包：en.json、zh.json

locales/en.json

{
  "common": {
    "home": "home",
    "about": "About",
    "tobeCoded": "To be coded",
    "signIn": "sign in",
    "signUp": "sign out"
  },
  ...
}

locales/zh.json

"common": {
    "home": "首页",
    "about": "关于",
    "tobeCoded": "待开发",
    "signIn": "登录",
    "signUp": "注册"
  },
  ...
}

locales/index.ts

默认使用当前浏览器界面语言。如果本地缓存有locale值，则使用缓存中记录的语言设置。

import {
   
    createI18n } from 'vue-i18n'
import zh from './zh.json'
import en from './en.json'

// 获取浏览器界面语言，默认语言
// https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/language
let currentLanguage = navigator.language.replace(/-(\S*)/, '')

// 如果本地缓存记录了语言环境，则使用本地缓存
let lsLocale = localStorage.getItem('locale') || ''
if (lsLocale) {
   
   
  currentLanguage = JSON.parse(lsLocale)?.curLocale
}

export default createI18n({
   
   
  locale: currentLanguage,
  legacy: false, // 修复组件引入i18n时vite脚手架报错的问题
  globalInjection: true, // 全局注册 $t
  messages: {
   
   
    zh,
    en
  }
})

export const langs = [
  {
   
    key: 'zh', title: '中文' },
  {
   
    key: 'en', title: 'English' }

最低0.47元/天解锁文章