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

目录

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

npm install vue-i18n

// 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

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

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

app.mount("#app")