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

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

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 'vue-i18n'
Vue.use(VueI18n)

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

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

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

Utiliser i18n

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

// js
$t('name')

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

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 // 导出语言包

.

cn est ajouté sous le projet

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
}

Texte de remplacement

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

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.

Articles connexes :

JS implémente la fonction de déplacement de la liste de gauche vers la liste de droite

Utilisation de l'expression EL dans JS pour obtenir des méthodes pour les valeurs des paramètres de contexte

Méthode de jQuery pour ajouter automatiquement des points de suspension lorsque le texte dépasse 1 ligne, 2 lignes ou un nombre spécifié de lignes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!