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

// i18n/index.js
 
import { createI18n } from 'vue-i18n'
 
// 語言包配置
const messages = {
  // 中文語言包
  zh: {
    message: {
      hello: '你好',
      welcome: '歡迎來到{name}',
      // 導航
      nav: {
        home: '首頁',
        about: '關于我們',
        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 實例
const i18n = createI18n({
  locale: 'zh', // 設置默認語言
  fallbackLocale: 'en', // 設置備用語言
  messages, // 語言包
  legacy: false, // 使用組合式API
  globalInjection: true // 全局注入 $t 函數(shù)
})
 
export default i18n

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

<!-- 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>

// 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>

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

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

// i18n/persistence.js
export const setupI18nPersistence = (i18n) => {
  // 從本地存儲獲取語言設置
  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)
  }
}

// 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. 路由標題國際化
router.beforeEach((to, from, next) => {
  const { t } = i18n.global
  document.title = t(to.meta.title) || '默認標題'
  next()
})
 
// 3. 錯誤信息國際化
const handleError = (error) => {
  const { t } = i18n.global
  showMessage(t(`error.${error.code}`))
}