使用vue-i18n實現中英文切換

源碼地址 ：vue-i18n-demo

1. 安裝 vue-i18n

   npm install vue-i18n --save-dev

2. 新建中英文對照文件

   // zh.js
   module.exports = {
     language: {
       name: "中文",
       current: "當前語言"
     },
     navbar: {
       home: "首頁",
       about: "關於我們",
       join: "加入我們",
       contact: "聯繫我們"
     }
   };
   
   // en.js
   module.exports = {
     language: {
       name: "English",
       current: "Current Language"
     },
     navbar: {
       home: "Home",
       about: "About",
       join: "Join Us",
       contact: "Contact Us"
     }
   };

3. 在 main.js 文件引入

   // main.js
   import VueI18n from "vue-i18n";
   
   Vue.use(VueI18n);
   const i18n = new VueI18n({
     locale: localStorage.getItem("lang") || "zh",
     messages: {
       zh: require("./assets/i18n/zh"),
       en: require("./assets/i18n/en")
     }
   });
   
   new Vue({
     router,
     i18n,
     render: h => h(App)
   }).$mount("#app");

4. 使用

   <template>
     <div>
       <ul class="lang" @click="changeLang">
         <li :class="isActive?'active':''">zh</li>/
         <li :class="!isActive?'active':''">en</li>
       </ul>
       <div>{{$t('language.current')}}：{{$t('language.name')}}</div>
       <ul>
         <li>{{ $t('navbar.home') }}</li>
         <li>{{ $t('navbar.about') }}</li>
         <li>{{ $t('navbar.join') }}</li>
         <li>{{ $t('navbar.contact') }}</li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     name: "I18nDemo",
     data() {
       return {
         isActive: true
       };
     },
     created() {
       let lang = document.documentElement.lang;
       localStorage.setItem("lang", lang);
       this.toActive(lang);
     },
     methods: {
       changeLang(e) {
         let lang = e.target.innerText;
         this.$i18n.locale = lang;
         this.toActive(lang);
       },
       toActive(lang) {
         this.isActive = lang == "zh" ? true : false;
       }
     }
   };
   </script>

   注： $t 是固定用法

5. 效果：