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' : '標(biāo)題',
        'username' : '請(qǐng)輸入用戶名',
        'password' : '請(qǐng)輸入密碼',
    },
}

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
 
// 以下為語(yǔ)言包單獨(dú)設(shè)置的場(chǎng)景，單獨(dú)設(shè)置時(shí)語(yǔ)言包需單獨(dú)引入
const messages = {
  'zh_CN': require('../statics/i18n/zh'),   // 中文語(yǔ)言包
  'en_US': require('../statics/i18n/en')    // 英文語(yǔ)言包
}
 
// 最后 export default，這一步肯定要寫(xiě)的。
export default new VueI18n({
  locale : 'en', // set locale 默認(rèn)顯示英文
  messages : messages // set locale messages
})

- main.js
//注意，因?yàn)槲覀僫ndex.js中把i18n綁定到了window，所以要在第一個(gè)引入
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'>切換語(yǔ)言</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>