vue一鍵國際化

vue-i18n-test

該項目用來測試自動國際化以後翻譯工具的使用狀況,基本模板是 vue-element-admin,測試文件夾路徑./src/views/i18n-translate

項目依賴庫

• vue-i18n
• vue-element-admin
• vue-i18n-generator
• vue-i18n-generator-translate

注意事項

1. 項目使用了 element,須要一塊兒進行國際化
2. 用戶的 language 選擇設置在 cookie 中(也可以經過數據庫創建 userSetting 表存儲,跨機器設備)
3. 生成的文件本地作備份並不推送,須要在.gitignore 中添加 /translate
4. 翻譯目錄儘可能使用./src/views
5. 沒法引入 vue 使用 vue 實例的儘可能不要出現中文,若是要用請移動到 views 文件外,保持 views 裏都是視圖文件(若是 vue-element-admin 存在這樣的文件也一併移出去)

項目結構

• 總體結構(vue-element-admin 默認目錄)

  

• lang 目錄結構

  

能夠看出當前項目是沒有 tw 的相關翻譯,須要在./src/utils/lang 下新建 tw.js,而且在./src/utils/lang/index.js 下加入代碼

......
import elementTwLocale from "element-ui/lib/locale/lang/zh-TW"; // element-ui lang
import twLocale from "./tw";
......

const messages = {
  ......
  tw: {
    ...twLocale,
    ...elementTwLocale
  }
};

複製代碼

將多餘的路由進行隱藏

進行抽離翻譯

npm install vue-i18n-generator -g
npm install vue-i18n-generator-translate -g
複製代碼

vue-i18n-generator 是一個抽離工具,18n generate ./src/views可以將當前文件夾全部中文抽離出來放到根目錄一個文件中 ./zh_cn.js

使用的時候最好作下翻譯的文件備份,該工具的 revert 命令不是很好使用,復原有機率失敗

module.exports = {
	"i18n_translate_index_82": "簡體中文",
	"i18n_translate_index_83": "繁體中文",
	"i18n_translate_index_84": "美式英文",
	"i18n_translate_index_85": "確認",
	"i18n_translate_index_86": "取消",
	"i18n_translate_index_87": "提交",
	"i18n_translate_index_88": "審覈",
	"i18n_translate_index_89": "查詢",
	"i18n_translate_index_90": "覈對",
	"i18n_translate_index_91": "劉德華",
	"i18n_translate_index_92": "香港",
	"i18n_translate_index_93": "周杰倫",
	"i18n_translate_index_94": "臺灣",
	"i18n_translate_index_95": "郭富城",
	"i18n_translate_index_96": "黎明",
	"i18n_translate_index_97": "大陸",
    ......
}
複製代碼

文件有路徑做爲 key 值,抽離的中文做爲 value 的一個對象.可是隻是抽離中文並不能知足咱們的需求,畢竟不能使用一個文本一個文本的翻譯的方式進行工做,因此在抽離後使用 vue-i18n-generator-translate 進行自動化翻譯,該工具包含了 vue-i18n-generator 的抽離工做.

i18ntranslate generate ./src/views/i18n-translate
複製代碼

如今能夠看到生成了一個 translate 文件夾,裏面是生成文件的備份,其中./translate/cache/tw/zh_TW.JS 是繁體的翻譯,./translate/cache/zh/zh_CN.JS 是中文格式,./translate/cache/en/en.JS 是英文的翻譯

./translate/cache/tw/zh_TW.JS

default: {
    ......
    "index_3":"繁體中文",
    "index_4":"美式英文",
    "index_5":"一些提醒的信息",
    ......
},
複製代碼

./translate/cache/en/en.JS

default: {
    ......
    "index_3":"traditional Chinese",
    "index_4":"American English",
    "index_5":"Some reminder information",
    ......
},
複製代碼

將對應翻譯文件複製粘貼到./src/utils/lang 下對應的語言文件

• 

• 

• 

翻譯完畢

如何翻譯

使用 opencc 進行中文譯繁體,puppeteer 調用簡易 chrome 進行自動翻譯(也可使用 translate.js 來調用 youdao/google/baidu 翻譯來調用 api 翻譯,速度能快 10 倍以上,但個人 ip 被封完了,只能找個穩點方法)

該方法對結構其實沒什麼要求,保持views視圖獨立,儘可能不要在views以外出現中文就能夠對整個src進行抽離

github地址