利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的全過程

更新時間：2021年08月02日 14:56:09 作者：木亦Sam

vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關于利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的相關資料,需要的朋友可以參考下

前言

最近有人在吐槽項目使用 Vue3 之后，出現(xiàn)一堆問題，填坑困難，甚至是開發(fā)中才發(fā)現(xiàn)某些第三方庫沒有推出 Vue3 的版本，因此大發(fā)吐槽，強烈建議不使用 Vue3。

做好技術預研和兼容性調(diào)查是開發(fā)前的工作之一，特別是對于新技術或者大版本的更新，除非你有十個膽，否則不要在預研不充分的情況下，在正式項目中使用。

最近在將自己的某個 Vue3 的項目接入國際化配置，整體的過程跟 Vue2 并沒有太大的區(qū)別，在此做下技術經(jīng)驗分享。

安裝vue-i18n

npm i vue-i18n --save

這里使用的是 vue-i18n 來實現(xiàn)國際化多語言切換，i18n 這個名字其實是由英文單詞 internationalization 的首尾兩個字母和中間的字符數(shù) 18 組成，意為「國際化」。

配置Locales

在項目 src 中新建 locales 文件夾，在里面新建 language 文件夾，用于存儲各個語言的文本配置。language 中新建 en 和 zh-CN 文件夾，并對應的新建 index.js，填充以下內(nèi)容：

// src/locales/language/zh_CN/index.js

export default {

    title: "中文標題",

}

// src/locales/language/en/index.js

export default {

    title: "English title",

}

實現(xiàn) getLangs.js

在 locales 中新建 getLangs.js 文件，用于獲取 language 文件夾中的語言包并暴露出去。
這里用到了 lodash-es 插件，你需要安裝該插件：

npm i lodash-es --save

具體代碼如下：

import { set } from 'lodash-es'

const modules = import.meta.globEager('./language/**/*.js')

function getLanguages(langs, prefix = 'lang') {

  const obj = {}

  Object.keys(langs).forEach((key) => {

    const mod = langs[key].default

    let k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')

    const lastIndex = k.lastIndexOf('.')

    k = k.substring(0, lastIndex)

    const keyList = k.split('/')

    const lang = keyList.shift()

    const objKey = keyList.join('.')

    if (lang) {

      set(obj, lang, obj[lang] || {})

      set(obj[lang], objKey, mod)

    }

  })

  return obj

}

const { language } = getLanguages(modules)

export default language

創(chuàng)建 i18n 實例

接下來需要創(chuàng)建 i18n 實例，并掛載到 Vue。在 locales 中新建 i18n.js。代碼如下：

import { createI18n } from 'vue-i18n'

import messages from './getLangs'

export default createI18n({

  legacy: false,

  locale: window.localStorage.getItem("lang") || 'zh_CN',

  messages,

})

可以看到這里默認的語言配置是從瀏覽器中 localStorage 中獲取的，沒有則為 “zh-CN”。在切換語言后，需要將當前語言存起來，不然用戶刷新，可就又回到默認語言配置了。
在 main.js 中引入：

import i18n from './locales/i18n'

const app = createApp(App)

app.use(I18n).mount("#app")

模板中使用

這里使用 composition api 的方式引入并使用，在模板對應的位置中，使用 t 函數(shù)獲取當前語言配置下的展示文本，函數(shù)接收語言配置文件和屬性的路徑，通過點語法連接，如果找不到，則會將整個函數(shù)名稱以字符形式展示。

<template>

<p>{{t(`index.title`)}}</p>

</template>

import { useI18n } from "vue-i18n";

export default {

    setup() {

        const { t } = useI18n();

        return { t }

    }

}

語言切換

常用的語言切換方式有兩種，一種是將當前語言配置放到 url 上，切換語言即跳轉(zhuǎn)到對應的路由，再展示當前語言下的對應文本。

第二種是無刷新/跳轉(zhuǎn)的切換，將當前語言存儲到本地緩存中，通過修改 vue-i18n 的 locale 的值切換語言。
這里推薦使用第二種，切換語言不需要刷新頁面或者采用跳轉(zhuǎn)的形式。

<template>

  <a

    href="javascript:;"

    @click="setLocals(locale === 'zh_CN' ? 'en' : 'zh_CN')"

  >

    {{ locale === 'zh_CN' ? '英' : '中' }}

  </a>

</template>

<script>

import { useI18n } from "vue-i18n";

import { ref } from "@vue/reactivity";

export default {

setup() {

    const { t, locale } = useI18n();

    const getLocals = () => window.localStorage.getItem("lang") || locale.value;

    const currentLocale = ref(getLocals());

    const setLocals = (lang = "") => {

      locale.value = lang;

      window.localStorage.setItem("lang", lang);

    };

    if (!window.localStorage.getItem("lang")) {

      setLocals(currentLocale.value);

    } else {

      if (currentLocale.value !== locale.value) {

        setLocals(currentLocale.value);

      }

    }

    return {

      t,

      locale,

      setLocals,

    };

  },

};
</script>

初始化的時候，先從本地獲取當前語言，如果沒有則獲取默認的語言配置，切換語言時，不僅需要修改 locale 的值，還需要將當前語言存一份到本地緩存中。