Vue 项目国际化 i18n 实现指南

命名方法是首个单词首字母小写，其余单词首字母大写，无空格，无连接线，无下划线。 .json 文件里不允许最后有逗号，否则会报错。

2. 在 en-US.json 文件中添加代码：

{
  "common": {
    "confirm": "Confirm",
    "cancel": "Cancel",
    "pleaseEnterUsernameAndPassword": "Please enter username and password",
    "loginSuccess": "Login success",
    "loginFail": "Login fail"
  },
  "loginPage": {
    "title": "XX Management System",
    "userLogin": "User Login",
    "username": "Username",
    "password": "Password",
    "usernamePlaceholder": "Please enter username",
    "passwordPlaceholder": "Please enter password",
    "languageLabel": "Language",
    "loginButton": "Login",
    "text1": "If you have any questions, please contact technical support for assistance."
  }
}

3. 在 i18n.js 文件中添加代码：

// src/i18n.js
import { createI18n } from 'vue-i18n'
import zhCN from './locales/zh-CN.json'
import enUS from './locales/en-US.json'

const savedLocale = localStorage.getItem('user-locale')
const browserLocale = navigator.language || 'zh-CN'
const defaultLocale = savedLocale || (browserLocale.startsWith('en') ? 'en-US' : 'zh-CN')

const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,
  fallbackLocale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

export function setLocale(locale) {
  i18n.global.locale.value = locale
  localStorage.setItem('user-locale', locale)
}

export default i18n

第三步，在逻辑中添加 i18n

在需要转换的 vue 文件中的 script 标签的顶部写入代码：

import { useI18n } from 'vue-i18n';

同样在 script 标签中，在所有导入（import）的下面写入代码：

const { t } = useI18n();

第四步，在模板中使用 i18n

在你想展示可转换文字的地方变成：

{{ $t('key.path') }}

在单引号中间加上你刚刚定义的英文键值。例如我的登录的标题如下：

{{$t('loginPage.title')}}

需要填入外面的大名称和里面的小名称，中间使用英文的点'.'来连接。

示例：

<template>
  <div>
    <h1>{{ $t('loginPage.title') }}</h1>
    <h2>{{ $t('loginPage.userLogin') }}</h2>
    <div>{{ $t('loginPage.username') }}</div>
    <input type="text" v-model="loginForm.username" :placeholder="$t('loginPage.usernamePlaceholder')" />
    <button @click="debouncedLogin">{{ $t('loginPage.loginButton') }}</button>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 其他逻辑代码
</script>

最后再加上逻辑与样式的代码即可完成。