vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程

發(fā)布時(shí)間：2020-09-08 12:17:29 來(lái)源：腳本之家閱讀：258 作者：稀土掘金欄目：web開(kāi)發(fā)

前言

項(xiàng)目需要支持多語(yǔ)言，我們需要提取出項(xiàng)目中使用的靜態(tài)文本，使用語(yǔ)言包進(jìn)行管理，當(dāng)切換語(yǔ)言設(shè)置的時(shí)候，可以自動(dòng)切換整個(gè)項(xiàng)目的文字顯示。

發(fā)現(xiàn)Vue項(xiàng)目中有對(duì)應(yīng)的組件 vue-i18n ，而且對(duì)項(xiàng)目的代碼修改不大，于是就使用了這個(gè)組件去修改項(xiàng)目中的代碼。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

安裝

// 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

一般一個(gè)項(xiàng)目中使用都是通過(guò)安裝包的方式去運(yùn)行的， script 引入的較少。

使用

項(xiàng)目中配置i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: 'cn', // 設(shè)置語(yǔ)言 
  messages // 語(yǔ)言包
})

new Vue({
  el: '#app',
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: '名字'
  },
  us: {
    name： 'Name'
  }
}

使用i18n

// html 需要使用 {{}} 將 name包裝起來(lái)
{{$t('name')}}

// js
$t('name')

還有一些其他的用法，如：

針對(duì)不同語(yǔ)言，顯示不同的格式
如果在傳入自定義變量來(lái)控制顯示
... 具體的請(qǐng)參考官方文檔。

切換語(yǔ)言的話，可以使用內(nèi)置變量：

// 通過(guò)設(shè)置 locale 來(lái)切換語(yǔ)言
this.$i18n.locale = cn | us

語(yǔ)言包的生成 & 替換項(xiàng)目中原有的靜態(tài)文本

這一步最關(guān)鍵，抽離出所有出現(xiàn)的漢字，替換成 $t('xxx') ，維護(hù)多個(gè)版本的語(yǔ)言文件

語(yǔ)言包這邊是這么處理的，項(xiàng)目下新增一個(gè)目錄languages

--languages
  --lib
    -- cn.js // 中文語(yǔ)言包
    -- us.js // 英文語(yǔ)言包
    -- .. // 其他語(yǔ)言，暫未實(shí)踐
  -- index.js // 導(dǎo)出語(yǔ)言包

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>

問(wèn)題

不同的語(yǔ)言，格式不同，長(zhǎng)度不同，可能需要調(diào)整項(xiàng)目的樣式，以保正常
對(duì)于一個(gè)已經(jīng)在使用的項(xiàng)目，生成語(yǔ)言包這一步工作量大，浪費(fèi)時(shí)間
沒(méi)有考慮如果是否需要?jiǎng)討B(tài)的加載語(yǔ)言包，而非初始的加載所有的語(yǔ)言包

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽