利用Vite2和Vue3實現網站國際化的全過程
目錄
- 前言
- 安裝-i18n
- 配置Locales
- 實現 getLangs.
- 建立 i18n 例項
- 模板中使用
- 語言切換
- 關於切換後需要重新整理後才生效
- 切換語言觸發其他元件更新
- 總結
前言
最近有人在吐槽專案使用 Vue3 之後，出現一堆問題，填坑困難，甚至是開發中才發現某些第三方庫沒有推出 Vue3 的版本，因此大發吐槽，強烈建議不使用 Vue3。
做好技術預研和相容性調查是開發前的工作之一，特別是對於新技術或者大版本的更新，除非你有十個膽，否則不要在預研不充分的情況下，在正式專案中使用。
最近在將自己的某個 Vue3 的專案接入國際化配置，整體的過程跟 Vue2 並沒有太大的區別，在此做下技術經驗分享。
安裝vue-i18n
npm i vue-i18n --save
這裡使用的是 vue-i18n 來實現國際化多語言切換，i18n 這個名字其實是由英文單詞 internationalization 的首尾兩個字母和中間的字元數 18 組成，意為「國際化」。
配置Locales
在專案 src 中新建 locales 資料夾，在裡面新建 languhttp://www.cppcns.comage 資料夾，用於儲存各個語言的文字配置。language 中新建 en 和 zh-CN 資料夾，並對應的新建 index.js，填充以下內容：
// src/locales/language/zh_CN/index.js
export default {
title: "中文標題",}
// src/locales/language/en/index.js
export default {
title: "English title",}
實現 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)
http://www.cppcns.com
建立 i18n 例項
接下來需要建立 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 函式獲取當前語言配置下的展示文字，函式接收語言配置檔案和屬性的路徑，通過點語法連線，如果找不到，則會將整個函式名稱以字元形式展示。
<template>
<p>{{t(`index.title`)}}</p>
</template>
import { useI18n } from "vue-i18n";
export default {
setup() {
const { t } = useI18n();
return { t }
}
}
語言切換
常用的語言切換方式有兩種，一種是將當前語言配置放到 url 上，切換語言即跳轉到對應的路由，再展示當前語言下的對應文字。
第二種是無重新整理/跳轉的切換，將當前語言儲存到本地快取中，通過修改 vue-i18n 的 locale 的值切換語言。
這裡推薦使用第二種，切換語言不需要重新整理頁面或者採用跳轉的形式。
<template>
<a
href=":;"
@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) {
www.cppcns.com setLocals(currentLocale.value);
}
}
return {
t,locale,setLocals,};
},};
</script>
初始化的時候，先從本地獲取當前語言，如果沒有則獲取預設的語言配置，切換語言時，不僅需要修改 locale 的值，還需要將當前語言存一份到本地快取中。
關於切換後需要重新整理後才生效
上面的例子，在模板中直接使用 t 函式渲染的文字，在語言切換時是無需重新整理即可更新檢視語言的，但如果是在 setup 中直接使用 t 函式，則不會立即更新，需要重新整理後才生效。
這裡不推薦在模板以外的地方使用 t 函式，如有必要，可以在元件中定義多語言文字，在模板中通過鍵值對的形式去訪問。
切換語言觸發其他元件更新
在一些場景中，頁面展示的文字是通過外部獲取的，無法直接由語言切換觸發更新，需要實現類似兄弟元件的廣播效果。
在 Vue3 中取消了 global bug 的使用，進而可以用 mitt 等外掛代替。
總結
到此這篇關於利用Vite2和Vue3實現國際化的文章就介紹到這了,更多相關Vite2和Vue3網站國際化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！