Vue3国际化全攻略：从安装到多语言切换，让你的应用秒变国际范！

最新推荐文章于 2025-04-18 16:58:09 发布

lifire_H

最新推荐文章于 2025-04-18 16:58:09 发布

阅读量638

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_49707375/article/details/145926986

版权

一、为什么国际化是你的项目必备技能？

想象一下：你的网站用户有来自中国、日本、美国的用户，结果他们打开页面全是中文… 这场景就像在川菜馆给老外端上一盘不加备注的麻辣火锅🌶️——刺激但劝退！

国际化（i18n）就是给代码装上「语言翻译器」，让不同国家的用户看到自己熟悉的文字。今天我们就用Vue-i18n这把瑞士军刀，带你的Vue3项目实现“一键切换语言”的黑科技！

二、安装篇：20秒搞定插件安装

# 用npm安装（推荐）
npm install vue-i18n@9

# 用yarn安装
yarn add vue-i18n@9

划重点：Vue3必须用vue-i18n v9+版本，装错版本会报错！💥（别问我怎么知道的，都是泪）

三、配置篇：像搭积木一样构建语言体系

3.1 创建语言文件树🌲

推荐目录结构：

src/
  locales/
    index.ts       # 国际化配置入口
    lang/
      zh-CN.ts    # 中文包
      en-US.ts    # 英文包
      ja.ts       # 日文包

3.2 编写语言包

中文包示例（zh-CN.ts）：

export default {
  common: {
    welcome: "欢迎来到我的魔法小屋✨",
    button: {
      confirm: "确认",
      cancel: "取消"
    }
  },
  error: {
    network: "网络开小差了，快检查你的WiFi🧐"
  }
}

英文包（en-US.ts）：

export default {
  common: {
    welcome: "Welcome to my magic house✨",
    button: {
      confirm: "Confirm",
      cancel: "Cancel"
    }
  },
  error: {
    network: "Network is taking a nap, check your WiFi🧐"
  }
}

彩蛋：在翻译里加emoji，让用户会心一笑😏

3.3 组装国际化引擎🚗

配置核心文件（locales/index.ts）：

import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh-CN'
import enUS from './lang/en-US'

// 智能获取上次用户选择的语言
const savedLang = localStorage.getItem('lang') || navigator.language

const i18n = createI18n({
  legacy: false, // 必须关闭传统模式！
  locale: savedLang, 
  fallbackLocale: 'en-US', // 保底语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

// 导出语言选项（用于下拉菜单）
export const LANG_OPTIONS = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' }
]

export default i18n

技术点解读：

legacy: false：开启Vue3组合式API支持（必填项！）
fallbackLocale：当找不到翻译时自动切换备用语言
navigator.language：自动获取浏览器语言

四、挂载篇：让应用拥有国际基因🧬

在main.ts中注入灵魂：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'

createApp(App)
  .use(i18n)
  .mount('#app')

这就相当于给你的Vue应用安装了「多语言芯片」！

五、使用篇：5种场景玩转翻译

5.1 模板中的基础用法

<template>
  <h1>{{ $t('common.welcome') }}</h1>
  <button>{{ $t('common.button.confirm') }}</button>
</template>

效果预览：

中文模式 → “欢迎来到我的魔法小屋✨”
英文模式 → “Welcome to my magic house✨”

5.2 JS/TS中的编程式调用

import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log(t('error.network')) // 输出对应语言文案

5.3 动态参数翻译（超实用！）

语言包配置：

// zh-CN.ts
greeting: "你好，{name}！今天是你加入的第{day}天🎉"

模板使用：

<p>{{ $t('greeting', { name: '张三', day: 7 }) }}</p>

输出效果：
“你好，张三！今天是你加入的第7天🎉”

5.4 语言切换组件（带本地存储）

<template>
  <select v-model="currentLang" @change="changeLang">
    <option 
      v-for="lang in LANG_OPTIONS" 
      :value="lang.value"
    >
      {{ lang.label }}
    </option>
  </select>
</template>

<script setup>
import { LANG_OPTIONS } from '@/locales'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const currentLang = ref(localStorage.getItem('lang') || 'zh-CN')

const changeLang = (lang) => {
  locale.value = lang
  localStorage.setItem('lang', lang)
}
</script>

亮点功能：

自动保存用户选择到localStorage
下次访问自动恢复语言偏好

5.5 第三方UI库国际化（以Element Plus为例）

// locales/zh-CN.ts
export default {
  el: {
    pagination: {
      total: '共 {total} 条'
    }
  }
}

配置Element国际化：

import ElementPlus from 'element-plus'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhLocale
})

这样Element的组件也会自动切换语言！

六、高级技巧：让你的国际化更专业

6.1 按需加载语言包（性能优化）

// 动态加载语言包
const loadLocale = async (lang: string) => {
  const messages = await import(`./lang/${lang}.ts`)
  i18n.global.setLocaleMessage(lang, messages.default)
}

适合大型项目，减少首屏加载时间

6.2 日期/货币本地化

<template>
  <p>{{ $d(new Date(), 'long') }}</p>
  <p>{{ $n(1234.56, 'currency') }}</p>
</template>

配置示例：

createI18n({
  datetimeFormats: {
    'en-US': {
      long: { year: 'numeric', month: 'long', day: 'numeric' }
    }
  },
  numberFormats: {
    'en-US': {
      currency: { style: 'currency', currency: 'USD' }
    }
  }
})