Tutoriel d'installation et d'utilisation pour l'internationalisation du projet vue vue-i18n-js tutoriel-php.cn

Tutoriel d'installation et d'utilisation pour l'internationalisation du projet vue vue-i18n

亚连

Libérer： 2018-05-30 11:57:35

original

2517 Les gens l'ont consulté

Récemment entré en contact avec l'apprentissage du framework Vue.js combiné avec le projet de développement de composants Element-ui. En raison de la nécessité récente d'implémenter des fonctions d'internationalisation, l'article suivant présente principalement les informations pertinentes sur l'utilisation de vue-i18n pour l'internationalisation des projets vue. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer. .

Préface

Le projet doit prendre en charge plusieurs langues. Nous devons extraire le texte statique utilisé dans le projet et utiliser des packages de langues pour gérer. Lors du changement Lors du réglage de la langue, l'affichage du texte de l'ensemble du projet peut être automatiquement commuté.

J'ai trouvé qu'il existe un composant correspondant vue-i18n dans le projet Vue, et il ne modifiait pas beaucoup le code du projet, j'ai donc utilisé ce composant pour modifier le code dans le projet. Pas grand chose à dire ci-dessous, jetons un œil à l’introduction détaillée.

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

Copier après la connexion

Généralement utilisé dans un projet Si vous exécutez-le en installant le package, le script sera moins introduit.

Utilisez

pour configurer i18n dans le projet

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

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

new Vue({
  el: &#39;#app&#39;,
  ...
  i18n
})

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

Copier après la connexion

Utiliser i18n

// html 需要使用 {{}} 将 name包装起来
{{$t(&#39;name&#39;)}}

// js
$t(&#39;name&#39;)

Copier après la connexion

Il existe d'autres utilisations, telles que :

Pour différentes langues, affichez différents formats
Si vous transmettez des variables personnalisées pour contrôler l'affichage
... Spécifique Veuillez vous référer à la documentation officielle.

Pour changer de langue, vous pouvez utiliser des variables intégrées :

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

Copier après la connexion

Pack de langue Générez et remplacez le texte statique original

dans le projet Cette étape est la plus critique Extrayez tous les caractères chinois qui apparaissent et remplacez-les par $t('. xxx'), qui demande beaucoup de maintenance. C'est ainsi que sont gérés ici les fichiers de langues des versions

Un nouveau répertoire langues

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

Copier après la connexion

cn est ajouté sous le projet

export default {
  common: {
    message: &#39;消息&#39;
  },
  xxx: {
  }
}

Copier après la connexion

us.js

export default {
  common: {
    message: &#39;Messages&#39;
  },
  xxx: {
  }
}

Copier après la connexion

index.js

import cn from &#39;./lib/cn.js&#39;
export default {
  cn,
  us
}

Copier après la connexion

Texte de remplacement

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela sera utile à tout le monde à l'avenir.