使用Vue Router高階用法進行Vue.js國際化(i18n)和本地化(l10n)

首頁>技術>做工程師不做碼農2020-03-29 16:07

使用Vue Router高階用法進行Vue.js國際化(i18n)和本地化(l10n)

在任何前端框架中設定國際化(i18n)都可以通過使用不同的技術來完成。大多數企業級應用程式對頁面的每個語言版本使用不同的url，而不是使用cookie、本地儲存或瀏覽器設定來調整頁面上的內容語言。搜尋引擎（例如Google）也建議使用此方法。

例如，如果你開啟一個像apple.com這樣的網站，它會以預設語言載入(在這裡是US English)。但是，如果您想將語言更改為法語，則您的偏好語言將顯示在網站的URL中：

English — apple.comFrench — apple.com/frGerman — apple.com/deetc.

像這樣的站點需要複雜的後端伺服器設定，但是在它複雜的背後是簡單的路由器配置。其基本思想是，路由器將檢查URL的第一個引數是否是語言引數，如果是這樣，它將為您提供該語言的內容(apple.com/fr/iphone)。但是，如果第一個引數與任何受支援的語言都不匹配，它將以預設語言（apple.com/iphone）為您提供內容。我們將嘗試演示如何使用Vue路由器在Vue中實現這一目標。

在本文中，我們將介紹：

Vue i18n的安裝和配置載入開發轉換鍵（dev.json）使用Router將語言設定為URL引數使用Axios載入翻譯檔案（將JSON檔案與Vue分離）改變語言使用Linguallo TMS管理翻譯檔案（l10n）Vue i18n的安裝和配置

為了幫助我們進行國際化，我們將使用Vue i18n外掛。您可以使用以下方法安裝外掛

NPM：

npm install vue-i18n --save

Yarn：

yarn add vue-i18n

Vue CLI

vue add i18n

通過在i18n.js檔案中設定配置來配置外掛：

import Vue from &#39;vue&#39;import VueI18n from &#39;vue-i18n&#39;Vue.use(VueI18n)export default new VueI18n({  silentTranslationWarn: true,  locale: &#39;en&#39;,  fallbackLocale: &#39;dev&#39;,  messages: {    dev: { hello_world: &#39;Hello World!&#39; }  }})

然後，您將需要在main.js中註冊外掛：

import Vue from &#39;vue&#39;import App from &#39;./App.vue&#39;import router from &#39;./router&#39;import store from &#39;./store&#39;import i18n from &#39;./i18n&#39;Vue.config.productionTip = falsenew Vue({  router,  store,  i18n,  render: h =&gt; h(App)}).$mount(&#39;#app&#39;)

我們已經在Vue應用程式中設定了i18n！

載入開發轉換鍵（dev.json）

您可能已經注意到，我們已經將地區locale為dev。在開發新特性、修復bug等時，擁有一個開發翻譯檔案(dev.json)是有幫助的。此檔案主要在開發應用程式時使用，但也可以用作應用程式的預設後備語言。

在src資料夾中，建立區域設定資料夾並新增dev.json檔案，然後在例項化VueI18n時載入該檔案。您的i18n.js檔案現在應該如下所示：

import Vue from &#39;vue&#39;import VueI18n from &#39;vue-i18n&#39;Vue.use(VueI18n)export default new VueI18n({  silentTranslationWarn: true,  locale: &#39;en&#39;,  fallbackLocale: &#39;dev&#39;,  messages: {    dev: require(&#39;./locales/dev.json&#39;)  }})

使用Router將語言設定為URL引數

正如我們在開始時所提到的，我們的路由配置應該期望語言引數。如果第一個引數與任何支援的語言都不匹配，它將為您提供預設語言的內容。此外，如果URL與任何路由都不匹配，它將以英語（預設）語言載入404頁。

首先，讓我們用基本路徑定義支援的語言。建立新的資料夾常量並新增檔案locales.js：

export const SUPPORTED_LOCALES = [{  code: &#39;en&#39;,  base: &#39;&#39;,  flag: &#39;us&#39;,  name: &#39;English&#39;,  translations: &#39;/translations/en.json&#39;}, {  code: &#39;fr&#39;,  base: &#39;/fr&#39;,  flag: &#39;fr&#39;,  name: &#39;Français&#39;,  translations: &#39;/translations/fr.json&#39;}]

現在，我們將僅使用code屬性。在繼續閱讀本文時，我們將使用其餘的內容。

接下來，我們將配置路由器，更新 src/router/index.js：

import Vue from &#39;vue&#39;import VueRouter from &#39;vue-router&#39;Vue.use(VueRouter)import routes from &#39;./routes&#39;import { SUPPORTED_LOCALES } from &#39;../constants/locale&#39;// Creates regex (en|fr)function getLocaleRegex() {  let reg = &#39;&#39;  SUPPORTED_LOCALES.forEach((locale, index) =&gt; {    reg = `${reg}${locale.code}${index !== SUPPORTED_LOCALES.length - 1 ? &#39;|&#39; : &#39;&#39;}`  })  return `(${reg})`}const router = new VueRouter({  mode: &#39;history&#39;,  base: process.env.BASE_URL,  routes: [{    path: `/:locale${getLocaleRegex()}?`,    component: {      template: &#39;&lt;router-view&gt;&lt;/router-view&gt;&#39;    },    children: routes  }]});export default router

現在，我們的 src/router/router.js 檔案應如下所示：

function load (component) {  return () =&gt; import(/* webpackChunkName: &#34;[request]&#34; */ `@/views/${component}.vue`)}export default [{  path: &#39;about&#39;,  name: &#39;About&#39;,  component: load(&#39;About&#39;)},{  path: &#39;&#39;,  name: &#39;Home&#39;,  component: load(&#39;Home&#39;)}, {  path: &#39;*&#39;,  name: &#39;404&#39;,  component: load(&#39;404&#39;)}];

如果我們在路徑中使用簡單的動態引數，比如我們的父路由的 /:locale，路由器將無法輕鬆區分 /fr 和 /about URLs。用通俗易懂的術語來說，它將匹配兩個URL。基於這個原因，我們決定使用基於我們支援的locale配置構建的高階模式：

/:locale(en|fr)?

在這裡，:locale 代表我們的動態引數，（en | fr）表示引數param是en還是fr，則將匹配該引數，並設定語言環境param。如果第一個引數是其他引數，例如 /about，則路徑仍將匹配，但不會設定語言環境引數（因為我們後面的問號？表示可選引數）。

以上所有內容都可以這樣表示：

使用Axios載入翻譯檔案（將JSON檔案與Vue分離）

由於我們已經成功地從URL中提取了語言環境引數，因此我們現在可以配置應用程式，載入翻譯檔案並設定訊息。我們將在進入父級路線的守衛之前在內部進行此操作。這是接收3個引數的函式：

to - 你想去的路由from - 你來自哪個next - 完成後要呼叫的回撥函式

理想情況下，在企業應用程式中，翻譯檔案應該從Web應用程式外部化。這意味著檔案應位於應用程式上下文之外，從而允許業務或IT部門更改翻譯檔案，而不必重新構建和部署前端應用程式。出於演示目的，我們將檔案放在public/translations 資料夾中，並建立新的en.json和fr.json檔案。

現在，我們的 src/router/index.js 檔案將如下所示：

import Vue from &#39;vue&#39;import VueRouter from &#39;vue-router&#39;import store from &#39;../store&#39;;import i18n from &#39;../plugins/i18n&#39;;import axios from &#39;axios&#39;;Vue.use(VueRouter);import routes from &#39;./routes&#39;;import { SUPPORTED_LOCALES } from &#39;../constants/locale&#39;;// Creates regex (en|fr)function getLocaleRegex() {  let reg = &#39;&#39;;  SUPPORTED_LOCALES.forEach((locale, index) =&gt; {    reg = `${reg}${locale.code}${index !== SUPPORTED_LOCALES.length - 1 ? &#39;|&#39; : &#39;&#39;}`;  });  return `(${reg})`;}// Returns locale configurationfunction getLocale(locale = &#39;en&#39;) {  return SUPPORTED_LOCALES.find(loc =&gt; loc.code === locale);}const router = new VueRouter({  mode: &#39;history&#39;,  base: process.env.BASE_URL,  routes: [{    path: `/:locale${getLocaleRegex()}?`,    component: {      template: &#39;&lt;router-view&gt;&lt;/router-view&gt;&#39;    },    beforeEnter(to, from, next) {      const locale = getLocale(to.params.locale);      store.dispatch(&#39;setLocale&#39;, locale);      axios.get(locale.translations).then(res =&gt; {        i18n.setLocaleMessage(locale.code, res.data || {});      }).catch(() =&gt; {        // TODO handle error      }).finally(() =&gt; {        i18n.locale = locale.code;        next();      });    },    children: routes  }]});export default router

讓我們看看我們的新後衛正在發生什麼：

我們正在使用 to.params.locale 讀取語言環境引數基於引數，我們將從 src/constants/locales.js 檔案中定義的受支援的語言環境列表中獲取配置，如果在 site/ 或 website/about 的示例中未設定語言環境，我們會將預設語言環境設定為 en。在我們的Vuex store中設定區域設定配置，以進一步用於確定當前應用程式區域設定根據語言環境，我們將使用Axios獲取JSON檔案如果檔案存在，我們將使用 i18n.setLocaleMessage() 設定翻譯訊息在 finally 語句中，我們將為i18n外掛設定語言環境並觸發 next() 回撥改變語言

我們希望通過路由更改實現的是，當用戶在特定語言中使用路由，但決定更改語言時，它會將使用者重定向到新的首選語言的相同頁面。

您可以在下圖上看到它：

這可以通過將URL指向另一個語言路由來實現。通過將 href 設定為錨元素，我們可以通過程式設計或直接從html實現這一點。以前，我們已經在我們的store中設定了當前的地區配置，但是現在我們可以使用它來計算實際的子路由。我們可以通過在完整路徑上執行 substring 並刪除語言基路徑來實現這一點。例如，如果我們當前的路線是 /fr/about，則我們的 beforeEnter 保護將配置設定為：

{  code: &#39;fr&#39;,  base: &#39;/fr&#39;,  flag: &#39;fr&#39;,  name: &#39;Français&#39;,  translations: &#39;/translations/fr.json&#39;}

接下來，我們將從完整路徑 /fr/about 中刪除基本部分 /fr，並獲得路由 /about。我們的新語言的最終URL將是前面示例中的新語言庫+新URL。如果您想新增更多的語言，例如德語(/de)，它將是 /de + /about = /de/about。在我們的例子中，它看起來像是 ‘’+ / about = / about。

邏輯可以在這裡看到：

使用Linguallo TMS管理翻譯檔案（l10n）

所示示例是一個僅包含幾個翻譯鍵的簡單專案。但是，正如我們一開始提到的，大規模應用程式要複雜得多。它們不僅具有成千上萬的鍵，而且它們都與語言數量成正比。因此，翻譯的最終數量很可能是數十萬。

此外，由於開發人員在開發新功能時會不斷新增新鍵，因此複雜性會進一步增加。因此，現在您可以在這裡看到一個重複的模式——每次新增翻譯時向其傳送新鍵並將它們同步迴應用程式。這就形成了一個巨大的惡性迴圈，非常耗時。

在我的整個職業生涯中，我熟悉了多種不同的TMS。其中價格最高的是Translator，它是Adobe Experience Manager（AEM）的一部分。但是，Adobe AEM的價格為數十萬美元，僅保留給數量有限的公司。

在搜尋和嘗試幾乎所有線上TMS時，我碰到了一個很棒的網站-Linguallo.com，它是SaaS，可以免費使用。免費計劃包括無限數量的電子表格，其中每個電子表格可以在每個應用程式中使用，並且每個工作表有500個免費託管鍵，5種語言和3個使用者可以在上面進行協作。以我的拙見，對於大多數公司來說，這是一個不錯的選擇。該工具與其他工具有什麼區別：

它看起來像Excel，使用起來很直觀，並且具有與Trello相似的角色庫訪問許可權。藉助名為Publisher（免費）的工具，它具有完整的版本管理功能。該工具類似於Jenkins，可以建立構建並將其部署到 AWS S3 或 GitHub。您可以直接以 Pull Request 的形式推翻譯鍵，或者使用它們的 CLI 從系統中 pull 出翻譯檔案，這是同步來自多個開發人員的新翻譯鍵的好方法。

最重要的是它允許連續本地化（Continuous Localization）的概念。

假設您已經安裝了Linguallo CLI，新增新鍵很簡單，只需在專案的工作區中鍵入以下內容：

translate push --input=&#34;./src/locales/dev.json&#34;

我強烈建議您嘗試一下，並在評論部分告訴我您的印象！

即使它是“三巨頭”（Angular，React和Vue）中的最新產品，我也一定會在企業應用程式中嘗試一下Vue，因為我已經在與團隊進行討論。多年來，我一直在Angular和React框架中進行開發，同時構建了世界上最大的旅行電子商務Web應用程式之一。

我認為，與React相比，Vue更容易學習。 Vue以Web開發人員已經習慣的方式分離關注點，將HTML，CSS和JavaScript分離。我認為Vue掌握了React和Angular的精髓。

原文：https://levelup.gitconnected.com/advanced-vue-js-internationalization-i18n-and-localization-l10n-using-vue-router-a94ecd83fecd

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

#Vue.js#

260

JSON

路由器

最新評論

劇多

使用Vue Router高階用法進行Vue.js國際化(i18n)和本地化(l10n)

JSON

路由器

相關內容