RXEditor的第一版本是英文版，有些朋友看起來覺得不習慣，后來因為惰性，不愿意再修改舊代碼加入中文版，這次提前就把這個問題解決了，克服惰性最好的方式，就是想到就盡快去做，避免拖延，
本來計劃在界面的右上角，做一個下拉選單選擇語言，下拉選單的作業量稍稍有些大，并且很少有隨時切換界面語言的需求，最終確定獲取瀏覽器語言環境，并使用瀏覽器的語言設定，也就是說，用中文瀏覽器打開就是中文版，用英文瀏覽器打開就是英文版，用這樣的方式無感切換，作業量小，又好用（嗯，言外之意，我的決定是最好的），
確定下實作方式，馬上開工：
1、安裝vue-i18n插件：
npm i vue-i18n -S
2、在assets目錄下新建locales，用于存放字典相關檔案，語言文字內容放在.json檔案中，index.js檔案用于參考vue-i18n，并初始化一些基礎設定：
3、撰寫兩個語言版本的json檔案：
en.json
{ "toolbar": { "new" : "New", "open" : "Open", "save" : "Save", "download" : "Download", "about" : "About", "github" : "Github" } }
zh.json
{ "toolbar": { "new" : "新建", "open" : "打開", "save" : "保存", "download" : "下載", "about" : "關于", "github" : "Github" } }
注意，json檔案中要用雙引號，單引號無效，
3、撰寫index.js
import Vue from 'vue' import VueI18n from 'vue-i18n' //引入Vue-i18n Vue.use(VueI18n) //引入語言資源檔案 const locales = { zh: require('./zh.json'), en: require('./en.json'), } //構建vuei18n實體，后面會export 這個實體 const i18n = new VueI18n({ locale: getDefaultLang(), messages: locales, }) //獲取瀏覽器語言環境，截取lang的前2位字符，是因為瀏覽器語言回傳值可能是： //zh-cn Chinese(PRC) //zh-tw Chinese(Taiwan Region) //zh-hk Chinese(Hong Kong SAR, PRC) //zh-sg Chinese(Singapore) //en-us English(United States) //en English function getDefaultLang(){ let lang = navigator.language || navigator.userLanguage lang = lang.substr(0, 2) return lang } //進行一些基礎配置 export const setup = () => { let lang = getDefaultLang() Object.keys(locales).forEach(lang => { document.body.classList.remove(`lang-${lang}`) }) document.body.classList.add(`lang-${lang}`) document.body.setAttribute('lang', lang) Vue.config.lang = lang i18n.locale = lang }
4、裝入VUE實體
import i18n from './assets/locales' new Vue({ el: '#app', i18n, render: h => h(App) })
5、呼叫：
<div >
<i ></i>
{{$t('toolbar.new')}}
</div>
這樣完成了，運行結果：
本次作業，大量參考文章：https://segmentfault.com/a/1190000017762753 ，在此感謝作者分享如此優質內容，說不定他能感知到我的感恩:），
整個專案在這個歷史節點的代碼，請到我的Github上查看：https://github.com/vularsoft/studio-ui
找到該歷史節點的方法：
RXEditor是一個Boostrap代碼可視化編輯工具，本系列記錄了該軟體的開發程序，有問題的朋友請在ithub上給我留言，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144625.html
標籤：JavaScript
上一篇：快速掌握ES6的class用法