快捷導(dǎo)航

網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解

更新時(shí)間：2022年09月16日 09:42:58 作者：遠(yuǎn)方有云

國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

一、首先安裝i18n

npm install --save vue-i18n

此時(shí)安裝的是vue-i18n最新版本，項(xiàng)目跑不起來(lái)，后來(lái)?yè)Q成8.27.1版本就好了

npm install --save vue-i18n@8.27.1

二、創(chuàng)建語(yǔ)言包文件

1、在src目錄下創(chuàng)建i18n文件夾

2、在i18n文件夾下創(chuàng)建locale文件夾，在local文件夾下創(chuàng)建en.json、zh-CN.json

3、在i18n文件夾下創(chuàng)建i18n.js

import Vue from 'vue';
import Element from 'element-ui'
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './locale/en'
import zh from './locale/zh-CN'
const messages={
  en: {
      ...en,
      ...enLocale
  },
  zh: {
      ...zh,
      ...zhLocale
  }
}
let lang = localStorage.getItem('lang');
let locale = lang =='en_US'?'en':'zh';

Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: locale, //設(shè)置默認(rèn)語(yǔ)言
	messages,
    silentTranslationWarn: true
});

Vue.use(Element,{
    i18n:(key,value) => i18n.t(key,value)
})
export default i18n;

三、main.js引入i18n

打開(kāi)main.js文件，插入以下兩行代碼

四、修改App.vue文件

在頁(yè)面刷新時(shí)，還要保持語(yǔ)言的正確性（不至于切換成了英文，刷新一下又變成了中文）

五、頁(yè)面使用

在頁(yè)面中把中文替換成變量

html  {{ $t('index.title') }}
綁定值  :placehoider="$t('index.title')"
js  this.$t('index.title')

如果是PC端項(xiàng)目，在本地緩存中手動(dòng)設(shè)置語(yǔ)言即可看到效果

接下來(lái)繼續(xù)完善，加上切換語(yǔ)言按鈕

切換之后把所選語(yǔ)言存入本地緩存，window.location.reload() 重載頁(yè)面

當(dāng)然可以用別的方法。此時(shí)多語(yǔ)言設(shè)置基本完成，剩下的就是翻譯工作了。

最后

翻譯過(guò)后，發(fā)現(xiàn)滿(mǎn)屏英文，不方便閱讀。可以借助vscode 插件i18n Ally

https://github.com/lokalise/i18n-ally/wiki/Configurations

該插件不但可以看到中文提示，還是快速翻譯和查漏補(bǔ)缺。

vscode 安裝好i18n Ally 之后，還需要做個(gè)配置，在根目錄下找到.vscode文件夾下的settings.json(如果沒(méi)

有.vscode/setting.json直接新建一個(gè))，并在setting.json中做如下配置

{
  "i18n-ally.localesPaths": [
    "pxxxxx/xxxxx/src/i18n/locale",
  ],
  "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.enabledParsers": ["json", "js"],
    "i18n-ally.sourceLanguage": "zh-CN",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.enabledFrameworks": [
        "vue"
    ],
    "i18n-ally.translate.engines": ["google-cn", "google","deepl","libretranslate"]
}

使用方法，按照上圖1234順序即可

上圖標(biāo)識(shí)4 可以檢測(cè)遺漏的翻譯，可以批量批量翻譯，具體用法可以多嘗試一下。

總結(jié)

到此這篇關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的文章就介紹到這了,更多相關(guān)網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: