Vue項目實現(xiàn)國際化

一：自己配置 i18n 完成國際化

• 1、創(chuàng)建項目，在項目中安裝 vue-i18n

    vue cerate vue_i18n
    yarn add vue-i18n

• 2、在main.js中引入組件并且注冊

    import VueI18n from 'vue-i18n'      //引入vue-i18n組件
 
    Vue.use(VueI18n)        //use一下
 
    //注冊i8n實例并引入語言文件
    const i18n = new VueI18n({
        locale: 'zh',       //默認顯示的語言 可以使用sessionStorage.getItem('lang') || 'zh',
        messages: {
            'zh':require('./assets/locales/zh'),    //索引語言文件
            'en':require('./assets/locales/en')
        },
        silentTranslationWarn: true     //禁止打印警告信息
    })

• 3、在new Vue 中添加 i18n

    new Vue({
        router,
         i18n,
        render: h => h(App)
    }).$mount('#app')

• 4、配置語言文件（文件有兩種格式可以選擇.js和.json）

  • 1、.js的方式

      module.exports = {
          language: {
              zh:'中文',
              en:'英文',
          },
          navbar: {
              home: '首頁',
              introduction: '簡介',
              contact: '聯(lián)系我們',
              jing_product_name: '金融服務',
              jing_product_toast_msg: '開發(fā)中，敬請期待'
          }
      }
  

  • 2、.json的方式

  {
      "language": {
          "en": "英文",
              "zh": "中文"
      },
      "message": "你好 i18n !!"
  }
  

• 5、事件綁定，進行中英文切換

  • 1、在vue組件中進行事件綁定

  <button @click="changeLangue('zh')">{{$t('language.zh')}}</button>
  <button @click="changeLangue('en')">{{$t('language.en')}}</button>
  

  • 2、在methods的生命周期中進行切換

      changeLangue(lang){
          if(lang === 'zh'){
              sessionStorage.setItem("lang","zh");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //這里可以加上路由刷新，看自己的需求
              this.$router.go(0)
          }else if (lang ==='en') {
              sessionStorage.setItem("lang","en");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //這里可以加上路由刷新，看自己的需求
              this.$router.go(0)
          }
      }
  

二：使用i18n提供的方法用vue-cli來快速搭建環(huán)境

• 1、創(chuàng)建項目，在項目中安裝 vue-i18n

    vue create vue_i18n
    cd vue_i18n
    vue add i18n

• 2、瀏覽一下自動創(chuàng)建主要生成的目錄和文件

  • 1、 locales文件夾，該文件夾里面有一個默認的語言文件en.json

  • 2、 i18n.js文件，該文件主要是i18n的配置信息

  • 3、 在main.js的 new Vue中也為我們自動添加了 i8n

  • 4、 vue.config.js 不做解釋

• 3、對i18n.js的理解

  • 1、該文件主要是對i18n做了統(tǒng)一整理和管理

  export default new VueI18n({
      locale: process.env.VUE_APP_I18N_LOCALE || 'en',    //設(shè)置頁面的默認語言
          // process.env.VUE_APP_I18N_LOCALE 默認是英語顯示，我們要修改它為自定義
          // 可以通過sessionStorage.getItem('lang') 的方式
          // locale: sessionStorage.getItem('lang') || 'en'
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',       //可以理解為第二語言
      messages: loadLocaleMessages()      //加載的語言文件，我們不需要修改，在上面已經(jīng)為我們自動創(chuàng)建好了
  })
  

• 4、實現(xiàn)中英文切換

  • 1、在vue組件中進行事件綁定

  <button @click="changeLangue('zh')">{{$t('language.zh')}}</button>
  <button @click="changeLangue('en')">{{$t('language.en')}}</button>
  

  • 2、在methods的生命周期中進行切換

      changeLangue(lang){
          if(lang === 'zh'){
              sessionStorage.setItem("lang","zh");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //這里可以加上路由刷新，看自己的需求， 單獨的語言文件時需要重載路由才能顯示的
              this.$router.go(0)
          }else if (lang ==='en') {
              sessionStorage.setItem("lang","en");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //這里可以加上路由刷新，看自己的需求， 單獨的語言文件時需要重載路由才能顯示的
              this.$router.go(0)
          }
      }
  

• 5、自動構(gòu)建工具是使用vue-cli-plugin-i18n來就完成的

  • 驚喜

    • 在組件中，我們得到了一個<i18n></i18n>的標簽，在該標簽中我們可以使用json格式來直接編輯語言文件

    {
        "en": {
            "hello": "Hello i18n in SFC!"
    },
        "zh":{
            "hello": "你好 i18n in SFC!"
        }
    }
    

  • 在vue組件中的語言配置，和在單獨文件中配置有何異同

    • 1、在vue組件中直接配置語言文件，更加直觀
    • 2、在vue組件中的配置比加載單獨文件迅速
    • 3、我不知道了，歡迎各位補充

• 6、使用

   - 1、在組件中使用`{{$t(value)}}`的方式
   - 2、在標簽中使用`<img src='$t(VALUE)' />`的方式
  

• 7、必要說明

  • 1、以上為個人觀點，可能會用不足
  • 2、有錯誤的地方希望指正，謝謝