如何在VUE應用中實施國際化（I18N）？

安裝Vue I18n：Vue 3 使用npm install vue-i18n@next，Vue 2 使用npm install vue-i18n；2. 在locales 目錄下創建語言文件如en.json 和es.json，支持嵌套結構；3. 在Vue 3 中通過createI18n 創建實例並在main.js 中掛載，Vue 2 中通過Vue.use(VueI18n) 並實例化VueI18n；4. 模板中使用{{ $t('key') }} 插值，Vue 3 Composition API 中使用useI18n 的t 函數，Vue 2 Options API 中使用this.$t；5. 通過this.$i18n.locale = lang（Vue 2）或i18n.global.locale.value = lang（Vue 3）實現運行時語言切換；6. 可選地通過動態導入實現翻譯文件的懶加載以優化性能；7. 可通過navigator.language 檢測用戶瀏覽器語言並自動設置locale；通過以上步驟，可完整實現Vue 應用的多語言支持。

Implementing internationalization (i18n) in a Vue app is straightforward with the help of Vue I18n , the official internationalization plugin. Here's how to set it up step by step for both Vue 3 and Vue 2.

✅ Step 1: Install Vue I18n

For Vue 3 (use Vue I18n v9 ):

 npm install vue-i18n@next

For Vue 2 (use Vue I18n v8):

 npm install vue-i18n

✅ Step 2: Prepare Language Files

Create a folder (eg, locales ) to store translation files.

Example: locales/en.json

 {
  "greeting": "Hello!",
  "description": "Welcome to our application."
}

Example: locales/es.json

 {
  "greeting": "¡Hola!",
  "description": "Bienvenido a nuestra aplicación."
}

You can also support nested structures:

 {
  "home": {
    "title": "Home Page",
    "welcome": "Welcome, {name}!"
  }
}

✅ Step 3: Set Up i18n in Your App

For Vue 3 (Composition API):

Create i18n.js or i18n/index.js :

 import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import es from '../locales/es.json'

const messages = {
  en,
  es
}

const i18n = createI18n({
  locale: 'en', // default locale
  fallbackLocale: 'en',
  messages
})

export default i18n

Then, in your main.js :

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

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

For Vue 2 (Options API):

In main.js :

 import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import es from './locales/es.json'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, es }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

✅ Step 4: Use Translations in Components

In Templates:

 <template>
  <div>
    <p>{{ $t(&#39;greeting&#39;) }}</p>
    <p>{{ $t(&#39;description&#39;) }}</p>
    <p>{{ $t(&#39;home.welcome&#39;, { name: &#39;Alice&#39; }) }}</p>
  </div>
</template>

In JavaScript (Vue 3 Composition API):

 import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    console.log(t('greeting'))
    return { t }
  }
}

In Vue 2 Options API:

 export default {
  created() {
    console.log(this.$t('greeting'))
  }
}

✅ Step 5: Change Language at Runtime

Add a method to switch languages dynamically:

 // In a component
methods: {
  changeLocale(lang) {
    this.$i18n.locale = lang
  }
}

 <button @click="changeLocale(&#39;en&#39;)">English</button>
<button @click="changeLocale(&#39;es&#39;)">Español</button>

Note: In Vue 3 with createI18n , you may need to use i18n.global.locale.value = lang if using the global instance.

 import { i18n } from './i18n'
i18n.global.locale.value = 'es'

✅ Optional: Lazy Load Translations (for large apps)

To reduce bundle size, load translations on demand:

 const messages = {
  en: () => import('../locales/en.json'),
  es: () => import('../locales/es.json')
}

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

Vue I18n will handle async loading automatically.

✅ Bonus: Detect User's Preferred Language

Use browser language detection:

 const userLang = navigator.language || navigator.userLanguage
const locale = userLang.startsWith('es') ? 'es' : 'en'
i18n.global.locale.value = locale

Summary

• Use vue-i18n for translations.
• Store translations in JSON files.
• Set up the i18n instance and plug it into Vue.
• Use $t() in templates and code.
• Change locale dynamically.
• Optionally lazy-load translations and detect browser language.

With this setup, your Vue app can support multiple languages cleanly and efficiently.基本上就這些。

以上是如何在VUE應用中實施國際化（I18N）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！