vue多语言转换的几种方法总结

npm i language-tw-loader --save

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

npm run dev

npm install vue-i18n

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

  module.exports = {
    login:{
        'title' : '标题',
        'username' : '请输入用户名',
        'password' : '请输入密码',
    },
}

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
 
// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {
  'zh_CN': require('../statics/i18n/zh'),   // 中文语言包
  'en_US': require('../statics/i18n/en')    // 英文语言包
}
 
// 最后 export default，这一步肯定要写的。
export default new VueI18n({
  locale : 'en', // set locale 默认显示英文
  messages : messages // set locale messages
})

- main.js
//注意，因为我们index.js中把i18n绑定到了window，所以要在第一个引入
import i18n from './locales'
import Vue from 'vue'
import App from './App.vue'
import './common.scss'
 
const app = new Vue({
  components: {
    App
  },
  i18n,
  render: h => h(App),
});

<template>
  <div id="pageDiv">
    <section class="content">
      <h3>{{$t("login.title")}}</h3>
      <button @click='langToggle'>切换语言</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>