Several methods vue multi-language conversion

First, static converters

• Use Vue plug-in language-tw-loader
• When you package converts the text into local traditional, dynamic loading of the text is not converted. That returned interface text will not be automatically converted.
• After the package can not switch to English. Unless specifically play a simplified package.

Use

1, install the plug

npm i language-tw-loader --save

2, modify the configuration file webpackwebpack.base.conf.js

module: {
rules: [
    ......
  {
    test: /\.(js|vue)$/,
    loader: 'language-tw-loader',
  }
  ]
}

3, packing or run

npm run dev

Two, vue-i18n replaced by the word queries

1, the installation

npm install vue-i18n

2, then in our project staticsfolder below to add i18n folder, then create a new folder in our jsonlanguage pack directory format is roughly:

 

 en.js:

module.exports = {
  login:{
      'title' : 'this title',
      'username' : 'Please enter the user name',
      'password' : 'Please enter your password',
  },
}

zh.js:

  module.exports = {
    login:{
        'title': 'title' ,
         'username': 'Please enter your username' ,
         'password': 'Please enter your password' ,
    },
}

I18n language pack and introducing the i18n.js

 

Import View from 'view' 
import from VueI18n 'view-i18n'
Vue.use (VueI18n)
 
// The following scenario is provided a separate language packs, language packs need to be introduced separately provided alone 
const messages = {
   'zh_CN': the require ( '../ statics to / the i18n / ZH'),    // Chinese language pack 
  'en_US': the require ( '../ statics to / the i18n / EN')     // English language pack 
}
 
// Finally export default, this step is certainly to write. 
Export default  new new VueI18n ({
  the locale: 'EN', // SET default display the locale English 
  messages: messages // SET the locale messages 
})

And mount to the inlet of the file main.js

- main.js
 // Note that since we index.js in the i18n bound to the window, so to introduce the first 
Import i18n from './locales' 
Import from Vue ' VUE ' 
Import from App ' ./App. VUE ' 
Import ' ./common.scss'
 
const app = new view ({
  components: {
    App
  },
  i18n,
  render: h => h(App),
});

use

<template>
  <div id="pageDiv">
    <section class="content">
      <h3>{{$t("login.title")}}</h3>
      <Button @ click = 'langToggle'> switch languages ​​</ button>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  methods: {
    langToggle () {
      if(this.$i18n.locale == 'zh_CN'){
        this.$i18n.locale = 'en_US';
      }else{
        this.$i18n.locale = 'zh_CN';
      }
      console.log(this.$i18n.locale)
    }
  },
  mounted(){
  },
  created() {
  }
};
</script>

result:

 

 demo:https://my.weblf.cn/vuecli3_wp4_alone_demo/index.html