vue3实现国际化的过程与遇到的问题详解

目录

• 前言
• 安装引入
• 使用
• 遇到的问题
• 总结

前言

开发了一个国际化的项目，技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言，采用的是vue-i18n这一个国际化插件，貌似只看到英文文档，而且网上找的其他教程大部分是针对vue2的，对应vue3的比较少，所以自己整理了一下

安装引入

npm install vue-i18n

在src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换)

// zh.js
export default {
    login: {
        login: '登录',
        userName: '用户名'，
        password: '密码'
    }
}

// en.js
export default {
    login: {
        login: 'login',
        userName: 'userName'，
        password: 'password'
    }
}

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

const messages = {
  en,
  zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'en', // 设置备用语言
  messages, 
})

export default i18n

有个注意的地方就是上面用了缓存，待会会说到为什么要这样做

最后在main.js引入就好了

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')

至此插件就算配置好了，接下来使用的话基本上就两种场景，一是在