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)文章
這篇文章主要介紹了輕松實現(xiàn)一個簡單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
解決創(chuàng)建vue項目后沒有vue.config.js文件的問題
這篇文章給大家主要介紹如何解決創(chuàng)建vue項目后沒有webpack.config.js(vue.config.js)文件，文中有詳細的解決方法，感興趣的朋友可以參考閱讀下2023-07-07
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
本篇文章主要介紹了詳解使用vuex進行菜單管理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue-cli3.x配置全局的scss的時候報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中實現(xiàn)權(quán)限管理詳解,權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請求的發(fā)起權(quán)，請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue中利用prop進行父子通信時的注意事項,文中通過實例介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01