前端偶尔需要—Vue3+Vuetify国际化

一、技术背景

在前端开发中，国际化(i18n)已成为多语言应用的标配。Vue3配合Vuetify框架时，需要兼顾响应式数据绑定与Material Design组件库的特性。本方案基于vue-i18n v9+版本，实现与Vuetify3的深度整合。

二、核心实现方案

2.1 环境搭建

js 复制代码

# 安装依赖
npm install vue-i18n@next vuetify@next

2.2 基础配置

js 复制代码

// plugins/i18n.js 
import { createI18n } from 'vue-i18n' 
import en from '@/locales/en' 
import zh from '@/locales/zh'  
const i18n = createI18n({   
legacy: false,  
locale: import.meta.env.VITE_APP_LOCALE || 'en',   
fallbackLocale: 'en',   
messages: {     en,     zh   },   
localeMatcher: 'lookup',   missing: (locale, key) => {     
    console.warn(`Missing translation: ${locale}.${key}`)     
    return key   
    } 
})  
export default i18n

三、Vuetify组件集成

3.1 动态表单元素

js 复制代码

<template>   
  <v-form>    
   <v-text-field       
      v-model="formData.name"       
      :label="$t('common.name')"       
      required/>   
  </v-form> 
</template>  
<script setup> 
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
</script>

3.2 日期格式化

js 复制代码

import { defineComponent } from 'vue' 
import { useI18n } from 'vue-i18n'  
export default defineComponent({   
 setup() {    
  const { locale } = useI18n()         
  const formatter = new Intl.DateTimeFormat(locale.value, {       
      year: 'numeric',       
      month: 'long',        
      day: 'numeric'    
   })          
  return { formatter }  
 } 
})

四、高级功能实现

4.1 动态语言切换

js 复制代码

<template>  
  <v-menu>     
  <template v-slot:activator>      
    <v-btn>{{ t('language.current') }}: {{ currentLocale }}</v-btn>     
  </template>    
  <v-list>     
    <v-list-item          
     v-for="lang in availableLocales"         
     :key="lang.value"         
     @click="switchLanguage(lang.value)">
       {{ lang.text }} 
    </v-list-item>     
  </v-list>   
  </v-menu> 
  </template>  
  <script setup> 
  const { locale } = useI18n() 
  const currentLocale = computed(() => locale.value.toUpperCase()) 
  const availableLocales = [{ value: 'en', text: 'English' }, { value: 'zh', text: '中文' } ]  
  const switchLanguage = (lang) => {  
  locale.value = lang   
  localStorage.setItem('i18n-locale', lang) 
  } 
  </script>

4.2 按需加载语言包

js 复制代码

// plugins/i18n.js 
const loadLocaleMessages = async (locale) => {   
try {    
const messages = await import(`@/locales/${locale}.json`)     
return messages.default   
} catch (err) {    
console.error(`Failed to load locale: ${locale}`)     
return {}  
} }  
 const i18n = createI18n({   
  // ...其他配置   
  messages: {    
   async [locale]() {      
   return await loadLocaleMessages(locale)     
   }   
  }
})