vue項目國際化vue-i18n的安裝使用教程
更新時間：2018年03月14日 10:39:46 作者：稀土掘金
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項目。由于最近需要實現(xiàn)國際化功能，所以下面這篇文章主要介紹了vue項目國際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。
前言
項目需要支持多語言，我們需要提取出項目中使用的靜態(tài)文本，使用語言包進行管理， 當(dāng)切換語言設(shè)置的時候，可以自動切換整個項目的文字顯示。
發(fā)現(xiàn)Vue項目中有對應(yīng)的組件 vue-i18n ，而且對項目的代碼修改不大，于是就使用了這個組件去修改項目中的代碼。下面話不多說了，來一起看看詳細的介紹吧。
安裝
// script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> // npm 安裝 npm install vue-i18n // yarn 安裝 yarn add vue-i18n
一般一個項目中使用都是通過安裝包的方式去運行的， script 引入的較少。
使用
項目中配置i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
local: 'cn', // 設(shè)置語言
messages // 語言包
})
new Vue({
el: '#app',
...
i18n
})
// messages 大概的使用格式
{
cn: {
name: '名字'
},
us: {
name： 'Name'
}
}
使用i18n
// html 需要使用 {{}} 將 name包裝起來
{{$t('name')}}
// js
$t('name')
還有一些其他的用法，如：
- 針對不同語言，顯示不同的格式
- 如果在傳入自定義變量來控制顯示
- ... 具體的請參考官方文檔。
切換語言的話，可以使用內(nèi)置變量：
// 通過設(shè)置 locale 來切換語言 this.$i18n.locale = cn | us
語言包的生成 & 替換項目中原有的靜態(tài)文本
這一步最關(guān)鍵，抽離出所有出現(xiàn)的漢字，替換成 $t('xxx') ，維護多個版本的語言文件
語言包這邊是這么處理的，項目下新增一個目錄languages
--languages
--lib
-- cn.js // 中文語言包
-- us.js // 英文語言包
-- .. // 其他語言，暫未實踐
-- index.js // 導(dǎo)出語言包
cn.js
export default {
common: {
message: '消息'
},
xxx: {
}
}
us.js
export default {
common: {
message: 'Messages'
},
xxx: {
}
}
index.js
import cn from './lib/cn.js'
export default {
cn,
us
}
替換文本
<template>
...
<div>{{$t('message')}}</div>
...
</template>
問題
- 不同的語言，格式不同，長度不同，可能需要調(diào)整項目的樣式，以保正常
- 對于一個已經(jīng)在使用的項目，生成語言包這一步工作量大，浪費時間
- 沒有考慮如果是否需要動態(tài)的加載語言包，而非初始的加載所有的語言包
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
element組件中自定義組件的樣式不生效問題(vue scoped scss無效)
這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問題(vue scoped scss無效)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue使用混入定義全局變量、函數(shù)、篩選器的實例代碼
本文主要是給大家分享利用混入mixins來實現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點是ide會有方法、變量、篩選器提示。對vue中 利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識感興趣的朋友，跟隨小編一起看看吧2019-07-07
Vue+webpack項目配置便于維護的目錄結(jié)構(gòu)教程詳解
新建項目的時候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護是很重要。這篇文章主要介紹了Vue+webpack項目配置便于維護的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數(shù)來作為第二個請求的請求參數(shù)，這篇文章主要介紹了vue請求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+express+Socket實現(xiàn)聊天功能
這篇文章主要為大家詳細介紹了Vue+express+Socket實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)手機橫屏功能,需要的小伙伴可以參考一下2024-03-03