vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟
對(duì)于一些跨國項(xiàng)目來說，國際化是尤為重要的，那么什么要國際化呢?國際化的意思就是將我們寫的項(xiàng)目，能夠根據(jù)不同國家的語言，進(jìn)行翻譯，進(jìn)行切換，方便不同國家的客戶使用
基本思路如下
① 定義語言包：需要幾種語言展示，就定義幾個(gè)語言包
② 創(chuàng)建對(duì)象，對(duì)語言包進(jìn)行整合，對(duì)象的 key 為語言包的引用，值為語言包對(duì)象
③ 創(chuàng)建 vue-i18n 類的對(duì)象，同時(shí)為其 messages 屬性為第②步創(chuàng)建的對(duì)象，為其 locale 屬性賦值為第②步中語言對(duì)象對(duì)應(yīng)的 key
④ 在創(chuàng)建 Vue 實(shí)例對(duì)象時(shí)，掛載 vue-i18n 類的對(duì)象
1.安裝vue-i18n
i18n是internationalization這個(gè)單詞的縮寫，取了首字母i和結(jié)尾字母n，中間一用有18個(gè)字母，所以組合起來就所寫成i18n，這是一個(gè)用于給vue國際化的插件， 它可以輕松地將一些本地化功能集成到你的 Vue.js 應(yīng)用程序中
npm i vue-i18n@8.22.2
百度到8.22.2這個(gè)版本最完善，所以我就下了這個(gè)版本。
2.ElementUI多語言配置
引入element語言包文件src/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n' // 引入國際化插件包
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 中文包
import customEN from './en' // 自定義英語包
import customZH from './zh' // 自定義中文包
Vue.use(VueI18n) // 全局注冊(cè)國際化包
const messages = {
en: {
...customEN,
...elementEnLocale
},
zh: {
...customZH ,
...elementZhLocale
}
}
export function getLanguage() {
const chooseLanguage = Cookies.get('language')
if (chooseLanguage) return chooseLanguage
// 如果沒有選擇語言
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
return 'en' // 默認(rèn)語言
}
const i18n = new VueI18n({
locale: getLanguage(),
messages
})
export default i18n3. 自定義內(nèi)容多語言配置
在src/lang 文件夾下創(chuàng)建自定義語言的js文件
|- src
|-lang
|-index.js
|-en.js # 從資源包中拷入的
|-zh.js # 從資源包中拷入的
/src/lang/zh.js
export default {
navbar: {
welcomes: '歡迎使用',
companyName: '后臺(tái)管理系統(tǒng)',
},
}/src/lang/en.js
export default {
navbar: {
welcomes: 'welcome to use',
companyName: 'backstage management system',
}
}4.在main.js中掛載 i18n的插件
import i18n from '@/lang'
// 加入到根實(shí)力配置中
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})5.配置完成之后使用
在想要使用多語言的頁面，用t(‘屬性名’)來生成標(biāo)題。這里的t是引入了i18n之后，自動(dòng)掛載在vue實(shí)例上的功能。
<div class="dashboard-editor-container">
{{ $t('navbar.welcomes') }} {{ $t('navbar.companyName') }}
</div>手動(dòng)更改默認(rèn)語言后，看效果：
注：到這里已經(jīng)差不多完成了，還有個(gè)問題。就是如果使用了element-ui，element組件可能無法實(shí)現(xiàn)多語言。涉及到手動(dòng)處理 vue-i18n兼容性問題，官網(wǎng)已經(jīng)做了詳細(xì)介紹。
在main.js中加上一段這個(gè)代碼：
Vue.use(Element, {
size: Cookies.get('size') || 'medium' , // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
})6.現(xiàn)在已經(jīng)實(shí)現(xiàn)了多語言切換的核心邏輯
不能夠動(dòng)態(tài)的更改，只能代碼手動(dòng)，下面封裝一個(gè)動(dòng)態(tài)切換語言的組件
6.1 目的：
6.2 封裝多語言切換組件
封裝一個(gè)切換語言的組件，放在公共組件的位置： src/components/Lang/index.vue
<template>
<el-dropdown trigger="click" @command="changeLanguage">
<div>
<svg-icon class-name="international-icon" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
language() {
return this.$store.getters.language
}
},
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang // 設(shè)置給本地的i18n插件
this.$store.dispatch('app/setLanguage', lang)
this.$message.success('切換多語言成功')
}
}
}
</script>6.3 全局注冊(cè)組件
把這個(gè)組件在main.js中進(jìn)行掛載到全局
import Lang from '@/components/Lang'
Vue.component('Lang', Lang)6.4 在Navbar組件中引入使用組件或者是在想用該組件的地方引入
<!-- 語言包 -->
<Lang class="right-menu-item"></Lang>效果:
總結(jié)
到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vue項(xiàng)目國際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue.js國際化 vue-i18n插件的使用詳解
- vue項(xiàng)目國際化vue-i18n的安裝使用教程
- vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼
- vue項(xiàng)目中vue-i18n和element-ui國際化開發(fā)實(shí)現(xiàn)過程
- vue 國際化 vue-i18n 雙語言 語言包
- 使用vue 國際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語言切換功能
- vue使用i18n實(shí)現(xiàn)國際化的方法詳解
- Vue項(xiàng)目通過vue-i18n實(shí)現(xiàn)國際化方案(推薦)
相關(guān)文章
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳就是要從文件已經(jīng)下載的地方開始繼續(xù)下載，本文主要介紹了Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳，具有一定的參考價(jià)值，感興趣的可以了解下2023-05-05
這篇文章主要介紹了vue2.0組件之間傳值、通信的多種方式以及注意要點(diǎn)，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
手寫可拖動(dòng)穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例
這篇文章主要為大家介紹了手寫可拖動(dòng)穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue實(shí)現(xiàn)簡單網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件，這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫的炫酷動(dòng)畫效果形式，根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購、拍賣、下注等業(yè)務(wù)場景，且對(duì)移動(dòng)端友好,需要的朋友可以參考下2018-11-11