vue3實現(xiàn)國際化的過程與遇到的問題詳解
前言
開發(fā)了一個國際化的項目，技術棧是vue3 + TS + vite + vant + pinia, 需要設置多語言，采用的是vue-i18n這一個國際化插件，貌似只看到英文文檔，而且網(wǎng)上找的其他教程大部分是針對vue2的，對應vue3的比較少，所以自己整理了一下
安裝引入
npm install vue-i18n
在src下新建locals文件夾,包含index.js,en.js,zh.js(只做中英文切換)
// zh.js
export default {
login: {
login: '登錄',
userName: '用戶名'，
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() // 這是獲取瀏覽器的語言
const i18n = createI18n({
locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先從緩存里拿，沒有的話就用瀏覽器語言，
fallbackLocale: 'en', // 設置備用語言
messages,
})
export default i18n有個注意的地方就是上面用了緩存，待會會說到為什么要這樣做
最后在main.js引入就好了
import { createApp } from 'vue'
import i18n from './locals'
const app = createApp(App)
app.use(i18n)
app.mount('#app')至此插件就算配置好了，接下來使用的話基本上就兩種場景，一是在<template>里面,一種是在setup里面
使用
- 在<template>中使用
要用到一個$t()的方法，或者使用v-t也行
<div>
{{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>關于$t()還有很多用法，可以動態(tài)傳參等，具體還是去官網(wǎng)看看
- 在setup中使用
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t('login.useName'))
</script>目前項目中只采用這兩種方式，還有其他的就不展開了
- 切換語言
vue-i18n提供了一個全局變量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)// 重要！下面遇到問題里解釋
}
</script>遇到的問題
- 切換語言后，跳轉(zhuǎn)頁面或者刷新當前頁后語言又重置了
這是因為切換語言是修改的全局變量locale，當頁面一刷新，相當于又重置為默認值了，所以上面采用緩存來解決
- 使用ref或者reactive設置的文字，切換語言后不更新
這是因為這里的數(shù)據(jù)是初始化產(chǎn)生的，并不能跟著local變化而響應變化，關于這一點，我是放在了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定義之后再改語言無效
//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>當然啦解決方法不止這一種，還可以使用watch等，自己去找資料看看吧~
總結(jié)
按照目前的生態(tài)來看，做國際化項目還是比較多資料來參考的，ui框架用的是vant,這也可以通過設置locale來改變組件的語言。
import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)業(yè)務代碼使用vue-i18n也很簡單，是個不錯的選擇
到此這篇關于vue3實現(xiàn)國際化的過程與遇到問題的文章就介紹到這了,更多相關vue3實現(xiàn)國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
一個組件相當于是一個小模塊,它是html、css與js的集合體,可以用于描述頁面中的某個結(jié)構(模塊),下面這篇文章主要給大家介紹了關于輕松學Vue組件之單文件組件的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue+axios實現(xiàn)文件下載及vue中使用axios的實例
這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下2018-09-09
因業(yè)務需求，需要一個樹形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合適的，大部分樹形表格都沒有拖拽功能，所以決定自己實現(xiàn)一個。這里分享一下實現(xiàn)過程,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了vue router2.0二級路由的簡單使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue項目中接入websocket時需要ip端口動態(tài)部署問題
這篇文章主要介紹了vue項目中接入websocket時需要ip端口動態(tài)部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了.netcore+vue 實現(xiàn)壓縮文件下載功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue中添加與刪除，關鍵字搜索功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue中iframe使用以及結(jié)合postMessage實現(xiàn)跨域通信
這篇文章主要介紹了vue中iframe使用以及結(jié)合postMessage實現(xiàn)跨域通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09