快捷導(dǎo)航

Vue3和i18n實(shí)現(xiàn)多語(yǔ)言方式

更新時(shí)間：2024年04月25日 10:57:17 作者：程序人~

這篇文章主要介紹了Vue3和i18n實(shí)現(xiàn)多語(yǔ)言方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

第一部分：準(zhǔn)備工作

首先，我們需要?jiǎng)?chuàng)建一個(gè)基本的 Vue 3 應(yīng)用。如果你對(duì) Vue 3 不熟悉，別擔(dān)心，我們將從頭開(kāi)始。

打開(kāi)你的命令行工具，執(zhí)行以下命令：

vue create i18n-app

這將創(chuàng)建一個(gè)名為 “i18n-app” 的新 Vue 3 應(yīng)用。

安裝完成后，進(jìn)入應(yīng)用目錄并啟動(dòng)開(kāi)發(fā)服務(wù)器：

cd i18n-app
npm run serve

現(xiàn)在，打開(kāi)你最喜歡的代碼編輯器，并導(dǎo)航到 src 目錄下的 main.js 文件。

我們將在這里配置我們的 i18n。

第二部分：安裝和配置 i18n

在 main.js 文件中，我們首先需要安裝 i18n 庫(kù)。運(yùn)行以下命令來(lái)安裝：

npm install vue-i18n@next

安裝完成后，我們需要導(dǎo)入和配置 i18n。

在 main.js 文件中，添加以下代碼：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'en', // 默認(rèn)語(yǔ)言為英語(yǔ)
  messages: {
    en: {
      welcome: 'Welcome to my blog!',
      about: 'About',
      contact: 'Contact',
      // 更多英語(yǔ)文本...
    },
    zh: {
      welcome: '歡迎來(lái)到我的博客！',
      about: '關(guān)于',
      contact: '聯(lián)系',
      // 更多中文文本...
    },
    // 更多語(yǔ)言...
  },
});

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

在上述代碼中，我們創(chuàng)建了一個(gè) i18n 實(shí)例，并配置了默認(rèn)語(yǔ)言為英語(yǔ)（‘en’）。

然后，我們定義了不同語(yǔ)言的文本消息。

你可以根據(jù)需要添加更多語(yǔ)言和對(duì)應(yīng)的文本。

第三部分：在組件中使用多語(yǔ)言

現(xiàn)在，我們已經(jīng)配置好了 i18n，讓我們?cè)诮M件中使用多語(yǔ)言文本。

打開(kāi) App.vue 文件，并修改為以下內(nèi)容：

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <nav>
      <ul>
        <li>{{ $t('about') }}</li>
        <li>{{ $t('contact') }}</li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  // 組件邏輯...
};
</script>

在上述代碼中，我們使用 $t 方法來(lái)訪問(wèn) i18n 實(shí)例中的文本消息。

例如，$t('welcome') 將顯示當(dāng)前選擇語(yǔ)言下的歡迎消息。

第四部分：切換語(yǔ)言

最后，我們來(lái)實(shí)現(xiàn)切換語(yǔ)言的功能。

在 App.vue 文件中，我們添加一個(gè)簡(jiǎn)單的按鈕來(lái)切換語(yǔ)言。

修改 template 部分如下：

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <nav>
      <ul>
        <li>{{ $t('about') }}</li>
        <li>{{ $t('contact') }}</li>
      </ul>
    </nav>
    <button @click="toggleLanguage">切換語(yǔ)言</button>
  </div>
</template>

然后，在 script 部分添加以下代碼：

<script>
export default {
  methods: {
    toggleLanguage() {
      const currentLocale = this.$i18n.locale;
      const newLocale = currentLocale === 'en' ? 'zh' : 'en';
      this.$i18n.locale = newLocale;
    },
  },
};
</script>