快捷導(dǎo)航

vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題詳解

更新時(shí)間：2022年05月09日 10:46:07 作者：veryCold

像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪(fǎng)問(wèn)來(lái)自世界各地用戶(hù),所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下

前言

開(kāi)發(fā)了一個(gè)國(guó)際化的項(xiàng)目，技術(shù)棧是vue3 + TS + vite + vant + pinia, 需要設(shè)置多語(yǔ)言，采用的是vue-i18n這一個(gè)國(guó)際化插件，貌似只看到英文文檔，而且網(wǎng)上找的其他教程大部分是針對(duì)vue2的，對(duì)應(yīng)vue3的比較少，所以自己整理了一下

安裝引入

npm install vue-i18n

在src下新建locals文件夾,包含index.js,en.js,zh.js(只做中英文切換)

// zh.js
export default {
    login: {
        login: '登錄',
        userName: '用戶(hù)名'，
        password: '密碼'
    }
}

// en.js
export default {
    login: {
        login: 'login',
        userName: 'userName'，
        password: 'password'
    }
}

// index.js
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const messages = {
  en,
  zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 這是獲取瀏覽器的語(yǔ)言
const i18n = createI18n({
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先從緩存里拿，沒(méi)有的話(huà)就用瀏覽器語(yǔ)言，
  fallbackLocale: 'en', // 設(shè)置備用語(yǔ)言
  messages, 
})

export default i18n

有個(gè)注意的地方就是上面用了緩存，待會(huì)會(huì)說(shuō)到為什么要這樣做

最后在main.js引入就好了

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')

至此插件就算配置好了，接下來(lái)使用的話(huà)基本上就兩種場(chǎng)景，一是在<template>里面,一種是在setup里面

使用

在<template>中使用

要用到一個(gè)$t()的方法，或者使用v-t也行

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>

關(guān)于$t()還有很多用法，可以動(dòng)態(tài)傳參等，具體還是去官網(wǎng)看看

在setup中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>

目前項(xiàng)目中只采用這兩種方式，還有其他的就不展開(kāi)了

切換語(yǔ)言

vue-i18n提供了一個(gè)全局變量locale，直接修改即可

<template>
	<div class="menu">
    	<div class="menu-item" @click="changeLang('en')">English</div>
    	<div class="menu-item" @click="changeLang('zh')">中文</div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const changeLang = (lang: string) => {
  locale.value = lang
  localStorage.setItem('lang', lang)// 重要！下面遇到問(wèn)題里解釋
}
</script>

遇到的問(wèn)題

切換語(yǔ)言后，跳轉(zhuǎn)頁(yè)面或者刷新當(dāng)前頁(yè)后語(yǔ)言又重置了

這是因?yàn)榍袚Q語(yǔ)言是修改的全局變量locale，當(dāng)頁(yè)面一刷新，相當(dāng)于又重置為默認(rèn)值了，所以上面采用緩存來(lái)解決

使用ref或者reactive設(shè)置的文字，切換語(yǔ)言后不更新

這是因?yàn)檫@里的數(shù)據(jù)是初始化產(chǎn)生的，并不能跟著local變化而響應(yīng)變化，關(guān)于這一點(diǎn)，我是放在了computed里面解決的

<template>
	<div class="ilst">
    	 <div
            v-for="item in list"
            :key="item">
           {{item}}
   		 </div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue'
const { t } = useI18n()
// 使用ref定義之后再改語(yǔ)言無(wú)效
//const list = ref([
//  t('c100018'),
// t('c100019'),
// t('c100020'),
// t('c100021'),
// t('c100020'),
])
// 采用computed可解決
const list = computed(() => [
  t('c100018'),
  t('c100019'),
  t('c100020'),
  t('c100021'),
  t('c100020'),
])

</script>

當(dāng)然啦解決方法不止這一種，還可以使用watch等，自己去找資料看看吧~

總結(jié)

按照目前的生態(tài)來(lái)看，做國(guó)際化項(xiàng)目還是比較多資料來(lái)參考的，ui框架用的是vant,這也可以通過(guò)設(shè)置locale來(lái)改變組件的語(yǔ)言。

import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)

業(yè)務(wù)代碼使用vue-i18n也很簡(jiǎn)單，是個(gè)不錯(cuò)的選擇

到此這篇關(guān)于vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到問(wèn)題的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)國(guó)際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: