前言

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

發(fā)現(xiàn)Vue項目中有對應的組件 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 // 導出語言包

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>

問題

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。