欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年09月16日 09:42:58   作者:遠方有云  
國際化是設(shè)計軟件應(yīng)用的過程中應(yīng)用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

一、首先安裝i18n

npm install --save vue-i18n

此時安裝的是vue-i18n最新版本,項目跑不起來,后來換成8.27.1版本就好了

npm install --save vue-i18n@8.27.1

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

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è)置默認語言
	messages,
    silentTranslationWarn: true
});

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

三、main.js引入i18n

打開main.js文件,插入以下兩行代碼

四、修改App.vue文件

在頁面刷新時,還要保持語言的正確性(不至于切換成了英文,刷新一下又變成了中文)

五、頁面使用

在頁面中把中文替換成變量

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

如果是PC端項目,在本地緩存中手動設(shè)置語言即可看到效果

接下來繼續(xù)完善,加上切換語言按鈕

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

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

最后

翻譯過后,發(fā)現(xiàn)滿屏英文,不方便閱讀??梢越柚鷙scode 插件i18n Ally

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

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

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

有.vscode/setting.json直接新建一個),并在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順序即可

上圖標識4 可以檢測遺漏的翻譯,可以批量批量翻譯,具體用法可以多嘗試一下。

總結(jié)

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

相關(guān)文章

  • 解決Vue 給mapState中定義的屬性賦值報錯的問題

    解決Vue 給mapState中定義的屬性賦值報錯的問題

    這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報錯的問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue中slot-scope的深入理解(適合初學(xué)者)

    Vue中slot-scope的深入理解(適合初學(xué)者)

    這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解,這個教程非常適合初學(xué)者,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Vue3+TypeScript實現(xiàn)Docx/Excel預(yù)覽組件

    Vue3+TypeScript實現(xiàn)Docx/Excel預(yù)覽組件

    這篇文章主要為大家詳細介紹了如何使用Vue3+TypeScript實現(xiàn)Docx/Excel預(yù)覽組件,文中的示例代碼講解詳細,有需要的小伙伴可以參考下
    2024-04-04
  • vue中mock數(shù)據(jù),模擬后臺接口實例

    vue中mock數(shù)據(jù),模擬后臺接口實例

    這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 關(guān)于Element-ui中table默認選中toggleRowSelection問題

    關(guān)于Element-ui中table默認選中toggleRowSelection問題

    這篇文章主要介紹了關(guān)于Element-ui中table默認選中toggleRowSelection問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 保姆級Vue3開發(fā)教程分享

    保姆級Vue3開發(fā)教程分享

    這篇Vue3開發(fā)文檔,包含了 Vue3 開發(fā)中使用的所有語法,文中的示例代碼講解詳細,希望所有像他一樣還不熟的伙伴快速上手 Vue3,不會的再不看要遭老罪咯
    2023-04-04
  • 解決vue中el-date-picker?type=daterange日期不回顯的問題

    解決vue中el-date-picker?type=daterange日期不回顯的問題

    這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 安裝vue-cli的簡易過程

    安裝vue-cli的簡易過程

    安裝vue-cli的前提是你已經(jīng)安裝了npm,安裝npm你可以直接下載node的安裝包進行安裝。接下來通過本文給大家介紹安裝vue-cli的簡易過程,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
    2018-05-05
  • vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除

    vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除

    這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue3.0 vue-router4.0打包后頁面空白的解決方法

    vue3.0 vue-router4.0打包后頁面空白的解決方法

    本文主要介紹了vue3.0 vue-router4.0打包后頁面空白的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02

最新評論