Vue 项目国际化配置指南：i18n 实战 | 极客日志

JavaScript大前端

Vue 项目国际化配置指南：i18n 实战

介绍 Vue 项目中如何使用 vue-i18n 实现国际化功能。首先安装 vue-i18n 依赖，创建 locales 文件夹存放不同语言的 JSON 配置文件。在 i18n.js 中初始化 i18n 实例，配置当前语言及回退语言，并支持从本地存储读取用户偏好。在组件中使用 Composition API 的 useI18n 获取翻译函数 t，或在模板中使用 $t 方法调用键值对。示例展示了登录页面的多语言切换实现，包括语言选择下拉框和持久化设置。

时间旅人发布于 2026/4/6更新于 2026/4/178 浏览

Vue 项目国际化配置指南：i18n 实战

解释与说明

i18n，全名是 internationalization，称为国际化。即语言转换，让以其他语言作为母语的人能看懂前端中的文字。

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

缩写的由来

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

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

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

项目使用

安装

打开控制台
进入前端的文件夹

cd web

使用下载安装命令

npm install 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": "登录失败"
  },
  "loginPage": {

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

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,
  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') }}

{{$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')">
    <div>{{ $t('loginPage.password') }}</div>
    <input :type="passwordVisible ? 'text' : 'password'" v-model="loginForm.password" :placeholder="$t('loginPage.passwordPlaceholder')">
    <div>{{ $t('loginPage.languageLabel') }}</div>
    <select v-model="currentLanguage" @change="changeLanguage">
      <option value="zh-CN">简体中文</option>
      <option value="en-US">English</option>
    </select>
    <button @click="debouncedLogin">{{ $t('loginPage.loginButton') }}</button>
    <p>{{ $t('loginPage.text1') }}</p>
  </div>
</template>