Installations- und Verwendungs-Tutorial für die Internationalisierung des Vue-Projekts vue-i18n

Kürzlich kam ich mit dem Erlernen des Vue.js-Frameworks in Kombination mit dem Element-UI-Komponentenentwicklungsprojekt in Kontakt. Aufgrund der jüngsten Notwendigkeit, Internationalisierungsfunktionen zu implementieren, werden im folgenden Artikel hauptsächlich die relevanten Informationen zur Verwendung von vue-i18n für die Internationalisierung von Vue-Projekten vorgestellt. Freunde, die sie benötigen, können darauf verweisen .

Vorwort

Das Projekt muss mehrere Sprachen unterstützen. Wir müssen den im Projekt verwendeten statischen Text extrahieren und Sprachpakete zur Verwaltung verwenden Beim Umschalten der Sprache kann die Textanzeige des gesamten Projekts automatisch umgeschaltet werden.

Ich habe festgestellt, dass es im Vue-Projekt eine entsprechende Komponente vue-i18n gibt, die den Projektcode nicht wesentlich geändert hat, daher habe ich diese Komponente verwendet, um den Code im Projekt zu ändern. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Installation

// 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

Im Allgemeinen wird die Installation in einem Projekt verwendet wird als Paket ausgeführt und das Skript wird weniger eingeführt.

Verwenden Sie

, um i18n im Projekt zu konfigurieren

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: 'cn', // 设置语言 
  messages // 语言包
})

new Vue({
  el: '#app',
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: '名字'
  },
  us: {
    name： 'Name'
  }
}

Verwenden Sie i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

Es gibt einige andere Verwendungen, wie zum Beispiel:

• für verschiedene Sprachen zeigen unterschiedliche Formate an

• Wenn Sie benutzerdefinierte Variablen übergeben, um die Anzeige zu steuern

• ... Bitte beachten Sie die Einzelheiten finden Sie in der offiziellen Dokumentation.

Um die Sprache zu wechseln, können Sie integrierte Variablen verwenden:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

Generation des Sprachpakets & Ersetzen des ursprünglichen statischen Textes im Projekt

Dieser Schritt ist der wichtigste. Extrahieren Sie alle angezeigten chinesischen Zeichen und ersetzen Sie sie durch $t('xxx'. ), um mehrere Versionen zu verwalten. So wird mit der Sprachdatei

Sprachpaket

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言，暂未实践
  -- index.js // 导出语言包

cn.js wird unter dem Projekt

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
}

Ersatztext

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>

Das Obige habe ich hoffentlich für alle zusammengestellt Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

JS implementiert die Funktion zum Verschieben der linken Liste in die rechte Liste

Verwendung des EL-Ausdrucks in JS zum Abrufen von Methoden für Kontextparameterwerte

jQuery-Methode zum automatischen Hinzufügen von Auslassungspunkten, wenn der Text 1 Zeile, 2 Zeilen oder eine bestimmte Anzahl von Zeilen überschreitet

Das obige ist der detaillierte Inhalt vonInstallations- und Verwendungs-Tutorial für die Internationalisierung des Vue-Projekts vue-i18n. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!