Vue 项目前端国际化 i18n 配置与使用 | 极客日志

JavaScript大前端

Vue 项目前端国际化 i18n 配置与使用

Vue 项目通过 vue-i18n 库实现多语言国际化。流程涵盖依赖安装、语言包 JSON 文件创建、i18n 实例配置及组件内模板与逻辑层的调用方法。支持中英文切换并持久化存储用户语言偏好。

内存管理发布于 2026/3/29更新于 2026/4/221 浏览

Vue 项目前端国际化 i18n 配置与使用

解释与说明

i18n，全名是 internationalization，称为国际化。

其核心含义是语言转换，让以其他语言作为母语的人能看懂前端中的文字。

常用的就是中文简体（zh_CN）与英文（美国）（en_US）的转换，也可以增添中文繁体（zh_TW）等其他语言。

缩写的由来

internationalization，首字母 i 和末字母 n 之间有 18 个字母，故缩写为 i18n。

与之对应的是 L10n，本地化，Localization。

最好在项目初期就计划使用国际化，这样相对后期使用会大大减少工作量。

项目使用

安装

进入前端的文件夹

cd web

使用下载安装命令

推荐使用 npm、pnpm 或 yarn：

npm install vue-i18n
# 或使用 pnpm
pnpm add vue-i18n
# 或使用 yarn
yarn add vue-i18n

配置

第一步，创建语言库

在 src 文件夹下创建一个文件夹 locales；
再在 locales 文件夹下创建要转换成的语言文件；
在 src 文件夹下创建 i18n.js 文件。

注意 i18n.js 文件是与 locales 文件夹同级的，都在 src 文件夹下。

需要的是中文简体和英文（美国），所以是 zh-CN.json 和 en-US.json。

第二步，写入代码

在 zh-CN.json 文件中添加代码：

{
  "common": {
    "confirm": "确定",
    "cancel": "取消",
    "pleaseEnterUsernameAndPassword": "请输入账号和密码",
    "loginSuccess": "登录成功",
    "loginFail": "登录失败"

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

{
  "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."
  }
}

// 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, // 必须设置为 false，以使用 Composition API 模式
  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

import { useI18n } from 'vue-i18n';

const { t } = useI18n();

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

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

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

<template>
  <div>
    <h1>{{ $t('loginPage.title') }}</h1>
    <h2>{{ $t('loginPage.userLogin') }}</h2>
    <!-- 账号输入框 -->
    <div>
      <div>{{ $t('loginPage.username') }}</div>
      <input type="text" v-model="loginForm.username" :placeholder="$t('loginPage.usernamePlaceholder')">
    </div>
    <!-- 密码输入框 -->
    <div>
      <div>{{ $t('loginPage.password') }}</div>
      <input :type="passwordVisible ? 'text' : 'password'" v-model="loginForm.password" :placeholder="$t('loginPage.passwordPlaceholder')">
    </div>
    <!-- 语言选择 -->
    <div>
      <div>{{ $t('loginPage.languageLabel') }}</div>
      <select v-model="currentLanguage" @change="changeLanguage">
        <option value="zh-CN">简体中文</option>
        <option value="en-US">English</option>
      </select>
    </div>
    <button @click="debouncedLogin">{{ $t('loginPage.loginButton') }}</button>
    <p>{{ $t('loginPage.text1') }}</p>
  </div>
</template>