1. Install

npm install vue-i18n
Copy the code

2. Use

1. Create a js file (name it by yourself, and mine will be lang.js), export the file;

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default new VueI18n({
  locale:localStorage.getItem('lang') | |'zh'.// The front end can cache the selected language, so that the next time you enter the language package, the default is Chinese.
  //this.$i18n.locale
  messages: {
    'zh': require('@/assets/lang/zh'),   // Chinese language package
    'en': require('@/assets/lang/en'),    // English language pack
    'th': require('@/assets/lang/th'),    // Thai language pack
    'zh-TW': require('@/assets/lang/zh-TW'),    // Chinese (traditional) language package}})Copy the code

The language package introduced above is the JS file, that is, your page to use the language to switch to the text in this file; The following is the contents of zh.js and en.js, with the same key, so that the calls can be unified

//zh.js export const m = {email:' email number ', password:' password ', emailTips:' Please enter email number ', trueEmail:' Please enter correct email number ', PasswordTips :' Please enter your password ',};Copy the code
//en.js export const m = {email:'Account',// email password:' password ',// password emailTips:'Input email ', // Please enter the email number trueEmail:'Invalid email ', // Please enter the correct email number passwordTips:'Please input a password', LoginError :'Input Password',};Copy the code

2. Import it in main.js and mount it

import i18n from './lang.js';new Vue({
  el: '#app',
  i18n,  
  components: { App },
  template: '<App/>'
})
Copy the code

3. Switch languages

Use watch to monitor language selection to change the language type; And then I’ll cache it

<el-radio v-model="choiceLang" label="zh"> < / el - radio in Chinese ><el-radio v-model="choiceLang" label="th">ไ ท ย</el-radio>
<el-radio v-model="choiceLang" label="en">English</el-radio>

watch:{
  choiceLang(val) {
    localStorage.setItem('lang',val);
    this.$i18n.locale = val;; }},Copy the code

4. Reference

A.h HTML reference $t (‘ m.e mail ‘)

<div class="loginTit">{{$t('m.email')}} : < / div ><el-input v-model.trim="email" :placeholder="$t('m.emailTips')"></el-input>
Copy the code

B.j s referencethis.$t('m.passwordTips')