国际化解决方案之i18n

本文讲述了如何使用i18n对vue3进行国际化处理，以及引入i18n浏览器出现警告问题的解决方案。

vue3 下需要使用v9.x的i18n，安装命令如下

npm install vue-i18n@next

1.创建语言文件

创建存储英文变量的文件：src/i18n/lang/en.js

export default {
  title:"Star Cabin",
  login: {
    title: 'User Login',
    loginBtn: 'Login',
    usernameRule: 'Username is required',
    passwordRule: 'Password cannot be less than 6 digits'
  }
}

创建存储中文变量的文件：src/i18n/lang/zh.js

export default {
  title: "星空小屋管理系统",
  login: {
    title: "用户登录",
    loginBtn: "登录",
    usernameRule: "用户名为必填项",
    passwordRule: "密码不能少于6位"
  }
}

2.创建配置文件

我们需要将语言文件导入到配置文件中去，配置后项目中才能和使用，创建文件：src/i18n/index.js

import { createI18n } from "vue-i18n"
import mZhLocale from "./lang/zh"
import mEnLocale from "./lang/en"

const messages = {
  en: {
    msg: {
      ...mEnLocale
    }
  },
  zh: {
    msg: {
      ...mZhLocale
    }
  }
}

/**
 * 返回当前 lang
 */
function getLanguage() {
  return localStorage.getItem('language') ? localStorage.getItem('language'): 'zh'
}

const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale: getLanguage(),
  messages
})

export default i18n

main.js导入

import i18n from '@/i18n'
const app = createApp(App)
// ……
app.use(i18n)
app.mount("#app")

如何使用？

我们在配置文件中已经进行了全局注册，在项目中可直接使用，注意上文全局配置中，msg是前缀使用时不要确实，如果不需要可在配置文件中删除

<template>
    {{ $t('msg.title') }}
</template>

国际化之切换语言

<script setup>
import { useI18n } from 'vue-i18n'
import { defineProps, ref } from "vue"
import { ElMessage } from 'element-plus'

// 如果用户切换过语言，我们从本地获取切换的语言
const language = ref(localStorage.getItem('language') ? localStorage.getItem('language') : 'zh')

// 切换语言的方法
const i18n = useI18n()
// 绑定单机事件，lang代表语言简写，传递zh或en
const handleSetLanguage = lang => {
  i18n.locale.value = lang
  localStorage.setItem('language',lang)
  language.value = lang
  ElMessage.success('更新成功')
}
</script>

报错解决

打开浏览器控制台会出现如下错误：You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

安装 intlify/vite-plugin-vue-i18n

npm install @intlify/vite-plugin-vue-i18n

在 vite.js 中进行设置

import path from "path"
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname,'./path/to/src/locales/**')
    })
  ]
})