一文帶你搞懂Vue中i18n的使用方法
1.i18n的基礎(chǔ)介紹
i18n(Internationalization的縮寫(xiě),18代表首尾字母之間的字母數(shù))是"國(guó)際化"的簡(jiǎn)稱(chēng)。它的主要目的是讓?xiě)?yīng)用程序能夠適應(yīng)不同的語(yǔ)言和地區(qū)的需求。為什么需要i18n?全球化需求,應(yīng)用需要服務(wù)不同國(guó)家的用戶(hù),滿(mǎn)足多語(yǔ)言市場(chǎng)的業(yè)務(wù)拓展需求,提升產(chǎn)品的國(guó)際競(jìng)爭(zhēng)力。i18n不僅僅是一個(gè)翻譯工具,而是一個(gè)完整的國(guó)際化解決方案,它能夠幫助我們更好地開(kāi)發(fā)和維護(hù)國(guó)際化應(yīng)用,提升用戶(hù)體驗(yàn)和開(kāi)發(fā)效率。在現(xiàn)代web開(kāi)發(fā)中,i18n已經(jīng)成為構(gòu)建全球化應(yīng)用的必要工具。
2.安裝配置
# 1. 安裝 vue-i18n npm install vue-i18n@next # Vue 3.x # 或 npm install vue-i18n@8 # Vue 2.x
3.基礎(chǔ)配置
// i18n/index.js import { createI18n } from 'vue-i18n' // 語(yǔ)言包配置 const messages = { // 中文語(yǔ)言包 zh: { message: { hello: '你好', welcome: '歡迎來(lái)到{name}', // 導(dǎo)航 nav: { home: '首頁(yè)', about: '關(guān)于我們', user: '用戶(hù)中心' }, // 表單 form: { username: '用戶(hù)名', password: '密碼', submit: '提交', reset: '重置' } } }, // 英文語(yǔ)言包 en: { message: { hello: 'Hello', welcome: 'Welcome to {name}', nav: { home: 'Home', about: 'About', user: 'User Center' }, form: { username: 'Username', password: 'Password', submit: 'Submit', reset: 'Reset' } } } } // 創(chuàng)建 i18n 實(shí)例 const i18n = createI18n({ locale: 'zh', // 設(shè)置默認(rèn)語(yǔ)言 fallbackLocale: 'en', // 設(shè)置備用語(yǔ)言 messages, // 語(yǔ)言包 legacy: false, // 使用組合式API globalInjection: true // 全局注入 $t 函數(shù) }) export default i18n
4.在 main.js 中注冊(cè)
import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' const app = createApp(App) app.use(i18n) app.mount('#app')
5.基礎(chǔ)用法
<!-- 1. 模板中使用 --> <template> <!-- 基本翻譯 --> <h1>{{ $t('message.hello') }}</h1> <!-- 帶參數(shù)翻譯 --> <p>{{ $t('message.welcome', { name: 'Vue' }) }}</p> <!-- 切換語(yǔ)言 --> <select v-model="$i18n.locale"> <option value="zh">中文</option> <option value="en">English</option> </select> </template> <!-- 2. 組合式API中使用 --> <script setup> import { useI18n } from 'vue-i18n' const { t, locale } = useI18n() // 使用翻譯 console.log(t('message.hello')) // 切換語(yǔ)言 const changeLanguage = (lang) => { locale.value = lang } </script>
6.進(jìn)階用法
// 1. 數(shù)字格式化 const i18n = createI18n({ numberFormats: { zh: { currency: { style: 'currency', currency: 'CNY' } }, en: { currency: { style: 'currency', currency: 'USD' } } } }) // 使用 <template> <p>{{ $n(100, 'currency') }}</p> </template> // 2. 日期格式化 const i18n = createI18n({ datetimeFormats: { zh: { short: { year: 'numeric', month: 'short', day: 'numeric' } }, en: { short: { year: 'numeric', month: 'short', day: 'numeric' } } } }) // 使用 <template> <p>{{ $d(new Date(), 'short') }}</p> </template>
7.動(dòng)態(tài)加載語(yǔ)言包
// i18n/loader.js export const loadLanguageAsync = async (lang) => { // 動(dòng)態(tài)導(dǎo)入語(yǔ)言文件 const messages = await import(`./locales/${lang}.js`) // 設(shè)置語(yǔ)言包 i18n.global.setLocaleMessage(lang, messages.default) // 切換語(yǔ)言 i18n.global.locale.value = lang // 存儲(chǔ)語(yǔ)言選擇 localStorage.setItem('language', lang) return messages.default } // 使用 const changeLanguage = async (lang) => { await loadLanguageAsync(lang) }
8.語(yǔ)言包管理
// locales/zh.js export default { message: { // 通用 common: { confirm: '確認(rèn)', cancel: '取消', save: '保存' }, // 錯(cuò)誤信息 error: { network: '網(wǎng)絡(luò)錯(cuò)誤', timeout: '請(qǐng)求超時(shí)', notFound: '資源不存在' }, // 業(yè)務(wù)模塊 user: { login: '登錄', register: '注冊(cè)', profile: '個(gè)人資料' } } }
9.持久化語(yǔ)言選擇
// i18n/persistence.js export const setupI18nPersistence = (i18n) => { // 從本地存儲(chǔ)獲取語(yǔ)言設(shè)置 const savedLanguage = localStorage.getItem('language') if (savedLanguage) { i18n.global.locale.value = savedLanguage } else { // 獲取瀏覽器語(yǔ)言 const browserLang = navigator.language.split('-')[0] i18n.global.locale.value = browserLang localStorage.setItem('language', browserLang) } }
10.最佳實(shí)踐
// 1. 創(chuàng)建語(yǔ)言切換組件 const LanguageSwitcher = { setup() { const { locale, t } = useI18n() const languages = [ { code: 'zh', name: '中文' }, { code: 'en', name: 'English' } ] const changeLanguage = async (lang) => { await loadLanguageAsync(lang) document.querySelector('html').setAttribute('lang', lang) } return { locale, languages, changeLanguage } } } // 2. 路由標(biāo)題國(guó)際化 router.beforeEach((to, from, next) => { const { t } = i18n.global document.title = t(to.meta.title) || '默認(rèn)標(biāo)題' next() }) // 3. 錯(cuò)誤信息國(guó)際化 const handleError = (error) => { const { t } = i18n.global showMessage(t(`error.${error.code}`)) }
11.使用建議
合理組織語(yǔ)言包結(jié)構(gòu)
使用命名空間避免沖突
實(shí)現(xiàn)語(yǔ)言選擇持久化
考慮動(dòng)態(tài)加載優(yōu)化性能
注意日期和數(shù)字的本地化
做好錯(cuò)誤信息的國(guó)際化
保持語(yǔ)言包的同步更新
到此這篇關(guān)于一文帶你搞懂Vue中i18n的使用方法的文章就介紹到這了,更多相關(guān)Vue i18n使用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02axios模塊化封裝實(shí)例化及vue本地解決跨域方案
這篇文章主要為大家介紹了axios模塊化封裝實(shí)例化及vue本地解決跨域示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Vite打包優(yōu)化之縮小打包體積實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了使用Vite縮小打包體積如何實(shí)現(xiàn)的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue與原生app的對(duì)接交互的方法(混合開(kāi)發(fā))
vue開(kāi)發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目,很多都是打包后掛載在原生APP上的,這篇文章主要介紹了vue與原生app的對(duì)接交互的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別
這篇文章主要介紹了簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10解決vue select當(dāng)前value沒(méi)有更新到vue對(duì)象屬性的問(wèn)題
今天小編就為大家分享一篇解決vue select當(dāng)前value沒(méi)有更新到vue對(duì)象屬性的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果
本文主要介紹了拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02