preface

Recently, I am working on a project in Hong Kong, which needs to support simplified Chinese, traditional Chinese and English. After investigation, Vue – I18N is the mature one in Vue ecology. Project actual combat, I also accumulated some useful experience, write out and share with you.

The basic use

By default, you use VUE-CLI to build front-end engineering.

1. Installation:
npm i vue-i18n --save
Copy the code
In 2.srcDirectory creationi18nDirectory for multi-language related code
In 3.i18nThe directory to createlocale, place the language pack

The language package is generally stored in JSON format. We created simplified Chinese, Traditional Chinese and English language packages:

zh-CN.json

{
    "message": "Hello China"."pleaseEnter": "Please enter the content"."apple": The word "apple"."banana": "Banana"
}
Copy the code
zh-HK.json

{
    "message": "Hello China"."pleaseEnter": "Please enter the content"."apple": The word "apple"."banana": "Banana"
}
Copy the code
en.json

{
    "message": "hello, china"."pleaseEnter": "please enter content"."apple": "apple"."banana": "banana"
}
Copy the code
In 4.i18nDirectory creationindex.jsTo createi18nExample:
import Vue from 'vue';
import VueI18n from 'vue-i18n'; // Import language package information import en from"./locale/en.json";
import zhCN from "./locale/zh-CN.json";
import zhTW from "./locale/zh-TW.json"; I18n vue. use(VueI18n); Const messages = {en,"zh-CN": zhCN,
    "zh-TW": zhTW,} // Create and export an instance of VueI18n with the optionsexport default new VueI18n({
    locale: 'zh-CN', // Set the current language environment, default Chinese simplified messages, // set the language environment corresponding message})Copy the code
5. Register i18N to the Vue instance
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'; New Vue({router, store, i18n, // mount to root render: h => h(App)})$mount('#app')
Copy the code
6. Use it in components

In pages or components, there are three situations in which multiple languages are commonly used:

  • Render content in an HTML tag
  • Attributes on HTML tags
  • Multilingual data in components

All three cases depend on the global $t method after i18n is mounted.

Here’s how to write it in app.vue:

<template>
  <div id="app"> <! -- Switch language --> <labelfor> Select language: </label> <select V-model ="locale">
      <option
        v-for="(locale, index) in locales"
        :key="index"
        :value="locale.value">{{ locale.label }}</option> </select> <! -- Render content --> <h1>{{$t('message') }}</h1> <! -- Tag attributes --> < INPUTtype="text" :placeholder="$t('pleaseEnter')"/ > <! -- Calculate attribute list render --> <ul> <li v-for="(fruit, index) in fruits" :key="index">{{ fruit.label }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      locale: this.$i18n.locale, // use the language defined by default for i18n instances locales: [{value:"en",
          label: "English"
        },
        {
          value: "zh-CN",
          label: "Chinese Simplified"
        },
        {
          value: "zh-TW",
          label: "Traditional Chinese"}}; }, watch: { locale(val) { this.$i18n.locale = val;
    }
  },
  computed: {
    fruits() {
      return [
        {
          value: 1,
          label: this.$t("apple"}, {value: 2, label: this.$t("banana")}]; }},mounted() {
    console.log(this.$t()); }}; </script>Copy the code
7. Run to get the following page interaction:

readability

If we look at the code above, we can see that multi-language code is very unreadable. When pages are written in multiple languages, it is a nightmare to see items written like $t(“message”).

So how can you enhance readability? In fact, there is already a big guy in front of the pit, through the IDE plug-in to solve!!

Here we recommend Vue i18n Ally from VSCode, using three steps:

  • searchVue i18n AllyAnd installation;
  • Once installed, your project’s multilingual directory should be automatically detected;
  • Configure the code prompt to simplified Chinese: shortcut keyctrl+shift+pThe search box pops up at the topVue i18n ally: Change display language, the choice ofzh-CN.

Ok, then the IDE will make your code more readable.

style

The design draft is usually written in simplified Chinese. However, due to the inconsistent length between English and Chinese, the style will be confused, so we need to pay attention to this point at the beginning of the design. Generally, there are two schemes:

  1. Design draft two sets of UI, front two sets of style;
  2. The final design is compatible with both situations, leaving enough space for English (English is generally longer than Chinese).

reference

Vue – i18n website

Detailed code

Github.com/SimonPower/…

The last

If there is something wrong with the article, please point it out in the comments. And if it helps you, please give it a thumbs up