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 文件中添加代码：

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();

示例：

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 你的其他代码
</script>

第四步：在模板中使用 i18n

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

{{ $t('key') }}

在单引号中间加上你刚刚定义的 key。

例如登录的标题如下：

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

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

示例登录页 template 使用：

<template>
  <div>
    <img src="@/assets/Logo.png" alt="logo">
    <h1>{{ $t('loginPage.title') }}</h1>
    <h2>{{ $t('loginPage.userLogin') }}</h2>
    <input type="text" v-model="loginForm.username" :placeholder="$t('loginPage.usernamePlaceholder')">
    <button @click="debouncedLogin">{{ $t('loginPage.loginButton') }}</button>
  </div>
</template>

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

默认中文界面

英文界面