一文帶你搞懂Vue中i18n的使用方法

更新時(shí)間：2025年01月08日 10:24:05 作者：screct_demo

i18n是"國(guó)際化"的簡(jiǎn)稱,它的主要目的是讓應(yīng)用程序能夠適應(yīng)不同的語言和地區(qū)的需求,下面就跟隨小編一起來看看Vue中i18n的具體使用方法吧

1.i18n的基礎(chǔ)介紹

i18n（Internationalization的縮寫，18代表首尾字母之間的字母數(shù)）是"國(guó)際化"的簡(jiǎn)稱。它的主要目的是讓應(yīng)用程序能夠適應(yīng)不同的語言和地區(qū)的需求。為什么需要i18n？全球化需求，應(yīng)用需要服務(wù)不同國(guó)家的用戶，滿足多語言市場(chǎng)的業(yè)務(wù)拓展需求，提升產(chǎn)品的國(guó)際競(jìng)爭(zhēng)力。i18n不僅僅是一個(gè)翻譯工具，而是一個(gè)完整的國(guó)際化解決方案，它能夠幫助我們更好地開發(fā)和維護(hù)國(guó)際化應(yīng)用，提升用戶體驗(yàn)和開發(fā)效率。在現(xiàn)代web開發(fā)中，i18n已經(jīng)成為構(gòu)建全球化應(yīng)用的必要工具。

2.安裝配置

# 1. 安裝 vue-i18n
npm install vue-i18n@next    # Vue 3.x
# 或
npm install vue-i18n@8      # Vue 2.x

3.基礎(chǔ)配置

// i18n/index.js
 
import { createI18n } from 'vue-i18n'
 
// 語言包配置
const messages = {
  // 中文語言包
  zh: {
    message: {
      hello: '你好',
      welcome: '歡迎來到{name}',
      // 導(dǎo)航
      nav: {
        home: '首頁',
        about: '關(guān)于我們',
        user: '用戶中心'
      },
      // 表單
      form: {
        username: '用戶名',
        password: '密碼',
        submit: '提交',
        reset: '重置'
      }
    }
  },
  // 英文語言包
  en: {
    message: {
      hello: 'Hello',
      welcome: 'Welcome to {name}',
      nav: {
        home: 'Home',
        about: 'About',
        user: 'User Center'
      },
      form: {
        username: 'Username',
        password: 'Password',
        submit: 'Submit',
        reset: 'Reset'
      }
    }
  }
}
 
// 創(chuàng)建 i18n 實(shí)例
const i18n = createI18n({
  locale: 'zh', // 設(shè)置默認(rèn)語言
  fallbackLocale: 'en', // 設(shè)置備用語言
  messages, // 語言包
  legacy: false, // 使用組合式API
  globalInjection: true // 全局注入 $t 函數(shù)
})
 
export default i18n

4.在 main.js 中注冊(cè)

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'
 
const app = createApp(App)
app.use(i18n)
app.mount('#app')

5.基礎(chǔ)用法

<!-- 1. 模板中使用 -->
<template>
  <!-- 基本翻譯 -->
  <h1>{{ $t('message.hello') }}</h1>
  
  <!-- 帶參數(shù)翻譯 -->
  <p>{{ $t('message.welcome', { name: 'Vue' }) }}</p>
  
  <!-- 切換語言 -->
  <select v-model="$i18n.locale">
    <option value="zh">中文</option>
    <option value="en">English</option>
  </select>
</template>
 
<!-- 2. 組合式API中使用 -->
<script setup>
import { useI18n } from 'vue-i18n'
 
const { t, locale } = useI18n()
 
// 使用翻譯
console.log(t('message.hello'))
 
// 切換語言
const changeLanguage = (lang) => {
  locale.value = lang
}
</script>

6.進(jìn)階用法

// 1. 數(shù)字格式化
const i18n = createI18n({
  numberFormats: {
    zh: {
      currency: {
        style: 'currency',
        currency: 'CNY'
      }
    },
    en: {
      currency: {
        style: 'currency',
        currency: 'USD'
      }
    }
  }
})
 
// 使用
<template>
  <p>{{ $n(100, 'currency') }}</p>
</template>
 
// 2. 日期格式化
const i18n = createI18n({
  datetimeFormats: {
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      }
    },
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      }
    }
  }
})
 
// 使用
<template>
  <p>{{ $d(new Date(), 'short') }}</p>
</template>

7.動(dòng)態(tài)加載語言包

// i18n/loader.js
export const loadLanguageAsync = async (lang) => {
  // 動(dòng)態(tài)導(dǎo)入語言文件
  const messages = await import(`./locales/${lang}.js`)
  
  // 設(shè)置語言包
  i18n.global.setLocaleMessage(lang, messages.default)
  
  // 切換語言
  i18n.global.locale.value = lang
  
  // 存儲(chǔ)語言選擇
  localStorage.setItem('language', lang)
  
  return messages.default
}
 
// 使用
const changeLanguage = async (lang) => {
  await loadLanguageAsync(lang)
}

8.語言包管理

// locales/zh.js
export default {
  message: {
    // 通用
    common: {
      confirm: '確認(rèn)',
      cancel: '取消',
      save: '保存'
    },
    // 錯(cuò)誤信息
    error: {
      network: '網(wǎng)絡(luò)錯(cuò)誤',
      timeout: '請(qǐng)求超時(shí)',
      notFound: '資源不存在'
    },
    // 業(yè)務(wù)模塊
    user: {
      login: '登錄',
      register: '注冊(cè)',
      profile: '個(gè)人資料'
    }
  }
}

9.持久化語言選擇

// i18n/persistence.js
export const setupI18nPersistence = (i18n) => {
  // 從本地存儲(chǔ)獲取語言設(shè)置
  const savedLanguage = localStorage.getItem('language')
  
  if (savedLanguage) {
    i18n.global.locale.value = savedLanguage
  } else {
    // 獲取瀏覽器語言
    const browserLang = navigator.language.split('-')[0]
    i18n.global.locale.value = browserLang
    localStorage.setItem('language', browserLang)
  }
}

10.最佳實(shí)踐

// 1. 創(chuàng)建語言切換組件
const LanguageSwitcher = {
  setup() {
    const { locale, t } = useI18n()
    
    const languages = [
      { code: 'zh', name: '中文' },
      { code: 'en', name: 'English' }
    ]
    
    const changeLanguage = async (lang) => {
      await loadLanguageAsync(lang)
      document.querySelector('html').setAttribute('lang', lang)
    }
    
    return { locale, languages, changeLanguage }
  }
}
 
// 2. 路由標(biāo)題國(guó)際化
router.beforeEach((to, from, next) => {
  const { t } = i18n.global
  document.title = t(to.meta.title) || '默認(rèn)標(biāo)題'
  next()
})
 
// 3. 錯(cuò)誤信息國(guó)際化
const handleError = (error) => {
  const { t } = i18n.global
  showMessage(t(`error.${error.code}`))
}