i18n using (2)

In the project because there is likely to involve a lot of content, so it must not be written as the first phase in direct written main.js

1: Create

In the catalog needed, create two themselves by their own name json file

Example:

2: Write JSON file

//zh.js
module.exports = {
    subject: {
        title: 'Title'
    },
    message: {
        the Login: 'login' ,
        Username: 'name' ,
        Password: 'password' ,
    },
    Language: {
        zh: 'Chinese' ,
        En: 'English'
    }
}

//en.js
module.exports = {
  subject: {
    title: 'Title'
  },
  message: {
    login: 'Login',
    Username: 'Username',
    Password: 'Password',
  },
  Language: {
    zh: 'Chinese',
    in: 'Inglés'
  }
}

3: introducing the main.js

const i18n = new VueI18n({
  the locale: 'EN', // language identification 
  messages: {
     'ZH': the require ( './ Components / Common / ZH' ),
     'EN': the require ( './ Components / Common / EN' )
  }
})

4: Use the page

<template>
  <div>
    <div id="app">
      <div style="margin: 20px;">
        <h1 style="color: skyblue;">{{$t("subject.title")}}</h1>
        <div>
          <label for>{{$t('message.Username')}}:</label>
          <input type="text" :placeholder="$t('message.Username')" />
        </div>
        <div>
          <label for>{{$t('message.Password')}}:</label>
          <input type="text" :placeholder="$t('message.Password')" />
        </div>
      </div>
      <div style="margin:20px">
        <button @click="btnzh">中文</button>
        <button @click="btnEn">英语</button>
      </div>
    </div>
  </div>
</template>
<style lang="">
</style>
<script>
export default {
  data() {
    return {
    };
  },
  mounted() {},
  methods: {
    btnzh () {
      this.$i18n.locale = "zh";
    },
    btnEn () {
      this.$i18n.locale = "en";
    }
  }
};
</ script> 
where 
1: $ t () is a method of i18n 
2: Notation

1：　<h1>{{$t("subject").title}}</h1>

2：　<h1>{{$t("subject.title")}}</h1>

3：　<h1>{{$t("subject")['title']}}</h1>

Show results

Guess you like