【nuxt2/nuxt3】@nuxtjs/i18n國際化

文章目錄

• 前言
• 使用@nuxtjs/i18n插件步驟
• nuxt2使用插件步驟
• • 1.安裝依賴
  • 2.配置項
  • 3.使用方法
• nuxt3使用插件步驟
• • 1.安裝依賴
  • 2.配置項
  • 3.在頁面中的使用方法
• 4.一些通用的錯誤提示

前言

在網上閱讀的大部分nuxt國際化案例都還在使用

vue-i18n

插件做教程，實際上

nuxt

本身就已經基于

vue-i18n

封裝了

@nuxtjs/i18n

插件。而且它比

vue-i18n

封裝了更多好用的功能，具體的使用方法我們可以檢視官方文檔

但是

nuxtjs/i18n

官方好像沒有做中文翻譯，是以我在這裡出了一篇中文教程。

第一這個插件比vue-i18n用起來更友善，第二沒有太多的中文教程，第三把nuxt2和nuxt3的使用教程都做了進去。

• 與vue-i18n內建
• 自動生成路由和自定義路徑
• 搜尋引擎優化
• 延遲加載翻譯消息
• 基于自動檢測語言的重定向
• 不同語言的域名不同
• 使用Vuex存儲目前地區和消息

本文相關文獻：

https://i18n.nuxtjs.org/setup

https://github.com/nuxt-modules/i18n/tree/main

使用@nuxtjs/i18n插件步驟

nuxt2使用插件步驟

注意以下内容的教程版本是nuxt2！！！！！

nuxt3在下一節

1.安裝依賴

yarn add @nuxtjs/i18n # yarn

npm i @nuxtjs/i18n # npm
           

2.配置項

github上給的案例非常簡單，但是不便于維護，是以我們簡單的封裝下，拆分出語言配置部分友善我們後期增加、删除、編輯單詞等維護操作

首先我們在

assets

中建立

lang

檔案夾，以中文和英文舉例，建立

en_us.js

和

zh_cn.js

檔案

檔案中的内容是我們定義好的關鍵詞，所有需要切換語言的關鍵詞都放入這兩個js檔案管理

注意：兩個檔案内的key一定要對應起來，否則，就會使用預設語言的key，如果預設語言的key也沒有就顯示成$t内的字元名稱

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}
           

然後我們在

plugins

目錄下建立一個

i18n的js檔案

``

引入定義好的語言關鍵詞檔案

import en_us from '../assets/lang/en_us.js'
import zh_cn from '../assets/lang/zh_cn.js'


const i18n = {
  locales: ['en', 'zh'],//有多少地區的語言就添加多少種
  defaultLocale: 'en',//預設的地區語言
  vueI18n: {
    fallbackLocale: 'en',//回退政策，指定的locale中沒有找到對應資源的情況下使用的locale
    messages: { //要渲染的資訊，有多少語言就添加多少種
      en: en_us,
      zh: zh_cn
    }
  }

}

export default i18n
           

最後我們要把配置項引入并放到

nuxt.config.js

中

// nuxt.config.js
import i18n from './plugins/i18n'
{
  modules: [
    [
      '@nuxtjs/i18n',
      i18n
    ]
  ]
}
           

3.使用方法

• 在頁面展示使用：

  $t("welcome")

• 切換語種使用：

  <nuxt-link :to="switchLocalePath('en')">en</nuxt-link>

• 特殊的路由導航方式：

  <NuxtLink :to="localePath('/test')">跳轉</NuxtLink>

• 獲得執行個體方法:

  this.$i18n

注意：由于切換語言後url會改變，但是NuxtLink導航标簽跳轉時無法自動識别使用者切換的語言，是以nuxt/i18n提供了localePath方法幫助我們導航時識别目前使用者選擇的語言。

完整示例：

<template>
  <div>
    {{ $t("welcome") }}
    {{ $t("messages") }}
    <hr>
    切換語言：
    <nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
    <br>
    <nuxt-link :to="switchLocalePath('zh')">zh</nuxt-link>
    路由跳轉(前提是配置好test路由)：
     <NuxtLink :to="localePath('/test')">跳轉</NuxtLink>
    <br>
    <button @click="getI18n">擷取到i18n執行個體</button>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  components: {},
  data() {
    return {};
  },
  methods: {
    getI18n() {
      console.log(this.$i18n);
    }
  },
  mounted() {},
  asyncData() {},
};
</script>
           

nuxt3使用插件步驟

注意本文的教程版本是nuxt3！！！！！

1.安裝依賴

yarn add @nuxtjs/i18n # yarn

npm i @nuxtjs/i18n # npm
           

2.配置項

github上給的案例非常簡單，但是不便于維護，是以我們簡單的封裝下，拆分出語言配置部分友善我們後期增加、删除、編輯單詞等維護操作

首先我們在

assets

中建立

lang

檔案夾，以中文和英文舉例，建立

en_us.js

和

zh_cn.js

檔案

檔案中的内容是我們定義好的關鍵詞，所有需要切換語言的關鍵詞都放入這兩個js檔案管理

注意：兩個檔案内的key一定要對應起來，否則，就會使用預設語言的key，如果預設語言的key也沒有就顯示成$t内的字元名稱

//en
export default {
  welcome: 'hello',
  messages:'world!'
}
//zh
export default {
  welcome: '你好',
  messages:'世界!'
}
           

然後我們在

plugins

目錄下建立一個

i18n的ts檔案

引入定義好的語言關鍵詞檔案

import en_us from '../assets/lang/en_us.ts'
import zh_cn from '../assets/lang/zh_cn.ts'


const i18n = {
  locales: ['en', 'zh'],//有多少地區的語言就添加多少種
  defaultLocale: 'en',//預設的地區語言
  vueI18n: {
    fallbackLocale: 'en',//回退政策，指定的locale中沒有找到對應資源的情況下使用的locale
    messages: { //要渲染的資訊，有多少語言就添加多少種
      en: en_us,
      zh: zh_cn
    }
  }

}

export default i18n
           

最後我們要把配置項引入并放到

nuxt.config.ts

中

// nuxt.config.ts
import i18n from './plugins/i18n'
export default defineNuxtConfig({ 
  modules: [
    ['@nuxtjs/i18n',i18n]
  ],
})
           

3.在頁面中的使用方法

和

nuxt2

不同，

nuxt3

版本封裝了一個

hook

：

useSwitchLocalePath

友善我們再

setup

文法糖中使用

nuxt-link

标簽切換語言

• 在頁面展示使用：

  $t("welcome")

• 切換語種使用：

  <NuxtLink :to="switchLocalePath('en')">en</NuxtLink>

  +

  useSwitchLocalePath()

• 特殊的路由導航方式：

  <NuxtLink :to="localePath('/test')">跳轉</NuxtLink>

• 獲得執行個體方法:

  useI18n()

完整示例：

<template>
  <div class="app">
    <div class="title">
      {{ $t("welcome") }}
      {{ $t("messages") }}
    </div>

    <div>
    切換語言：
      <NuxtLink :to="switchLocalePath('en')">en</NuxtLink>
      <NuxtLink :to="switchLocalePath('zh')">zh</NuxtLink>
    路由跳轉(前提是配置好test路由)：
     <NuxtLink :to="localePath('/test')">跳轉</NuxtLink>
      <button @click="getI18n">擷取到i18n執行個體</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports"

const switchLocalePath = useSwitchLocalePath()
const localePath = useLocalePath();
const i18n = useI18n();

const getI18n = () => {
  console.log(i18n);
};
</script>
           

4.一些通用的錯誤提示

！！！注意：一定要仔細的确認中英文内的關鍵詞key相同

否則會觸發

fallbackLocale: 'en'

回退政策，指定的locale中沒有找到對應資源的情況下使用的locale

如果還沒找到就隻傳回

$t

内的字元

如果我們定義的關鍵詞檔案，key不同時浏覽器會發警告

舉例：當我們把

zh_cn.js

中的

messages

改成了

message

浏覽器就出現了警告

點選切換後因為’messages’和’message’不同，是以内容沒有切換過來使用了回退政策

fallbackLocale: 'en'

，預設使用’messages’英語’world’

中文模式中hello因為key相同已經切換成‘你好’。

是以一定要把所有語言的

key

都統一才行！！！