export default { 
    //中文
    msg: {
        msg1: '測試一',
        msg2: '測試二',
        msg3: '測試三',
        message: "第一個值",
        display: "第二個值",
        // 材料列表的材料類型
        materialType: {
            nameSteel: '鋼材',
            nameAlumialloy: '鋁合金',
            nameCfrp: '碳纖維復合材料',
            nameSoft: '軟材料',
            nameOther: '其他',
        },
    }
}

export default { 
  //英文
    msg: {
        msg1: 'test one',
        msg2: 'test two',
        msg3: 'test three',
        message: "first value",
        display: "second value",
        // 材料列表的材料類型
        materialType: {
            nameSteel: 'Steel',
            nameAlumialloy: 'Aluminum alloy',
            nameCfrp: 'Carbon Fiber Composites',
            nameSoft: 'Soft Materials',
            nameOther: 'Other',
        },
    }
}

import Vue from "vue"
import VueI18n from "vue-i18n"
//引入自定義語言配置  
import zh from './langs/zh'
import en from './langs/en'
//引入UI框架語言配置---elementui
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

ElementLocale.i18n((key, value) => i18n.t(key, value)) //為了實現(xiàn)element插件的多語言切換
Vue.use(VueI18n); // 全局注冊國際化包

// 準備翻譯的語言環(huán)境信息
const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || "zh", //將語言標識存入localStorage或sessionStorage中，頁面刷新不會默認中文顯示
    messages: {
        // 中文語言包
        'zh': {
            ...zh,
            ...zhLocale
        },
        //英文語言包
        'en': {
            ...en,
            ...enLocale
        }
    },
    silentTranslationWarn: true, //解決vue-i18n黃色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
    globalInjection: true, // 全局注入
    fallbackLocale: 'zh', // 指定的locale沒有找到對應的資源或當前語種不存在時，默認設置當前語種為中文
});

export default i18n

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'
import i18n from './i18n'
...

// Vue.use(ELEMENT)
Vue.use(ELEMENT,
    {
      i18n: (key, value) => i18n.t(key, value) // 在注冊Element時設置i18n的處理方法,可以實現(xiàn)當點擊切換按鈕后，elementUI可以自動調(diào)用.js語言文件實現(xiàn)多語言切換
    }
)

...

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

<!-- 使用方式一，在模板字符串中使用 -->
 <h1>使用方式一：</h1>
 <h4>{{ $t('msg.msg1') }}</h4>

 <!-- 使用方式二，綁定屬性使用 -->
 <h1>使用方式二：</h1>
 <h4 v-text="$t('msg.msg2')"></h4>
 <el-input :placeholder="$t('msg.msg2')"></el-input>

 <template>
    <!-- 使用方式三，在script標簽內(nèi)的data中先聲明變量，然后獲取到值，最后渲染到html中 -->
    <h1>使用方式三：</h1>
    <h4>{{ title }}</h4>
    <h4 v-text="title"></h4>
    <!-- 標簽頁-->
    <el-tabs @tab-click = "handleClick">
        <el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getSteel">
        </el-tab-pane>
        <el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getAlumialloy">
        </el-tab-pane>
        <el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getCfrp">
        </el-tab-pane>
        <el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getSoft">
        </el-tab-pane>
        <el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getOther">
        </el-tab-pane>
    </el-tabs>
 </template>
 <script>
   export default {
     name: '',
     // 在data節(jié)點中使用
     data () {
       return {
         title: this.$t('msg.msg3'), //this.$i18n.t('')也行
         // 標簽頁
         materialType: [
           {
             id: '1',
             // name: '鋼材'
             name: this.$t('msg.materialType.nameSteel')
           },
           {
             id: '2',
             // name: '鋁合金'
             name: this.$t('msg.materialType.nameAlumialloy')
           },
           {
             id: '3',
             // name: '碳纖維復合材料'
             name: this.$t('msg.materialType.nameCfrp')
           },
           {
             id: '4',
             // name: '軟材料'
             name: this.$t('msg.materialType.nameSoft')
           },
           {
             id: '5',
             // name: '其他'
             name: this.$t('msg.materialType.nameOther')
           }
         ],
       }
     },
     // 在methods節(jié)點中使用
     methods: {
        console.log(this.$t('msg.materialType.nameOther'))
     },
     // 在 computed節(jié)點中使用
     computed: {
       infoX() {
         return this.$t('msg.materialDetailsTitle3.infoX')
       },
     },
     mounted() {},
   }
 </script>

<!-- 使用方式四，msgss存在多個值，使用了模板字符串，拿到msgss的值再拼接，構(gòu)成msg.message或者msg.display -->
<h1>使用方式四：存在多個值之間的切換</h1>
<h4>{{ $t(`msg.${msgss}`) }}</h4>
<button @click="changeWord">切換按鈕</button>

 data () {
    return {
       // 定義變量用于切換不同的值,對應著en.js和zh.js中的message和display
       msgss:'message'
     }
  },
  methods: {
    // 用于不同的值
    changeWord() {
      if(this.msgss === 'message'){
        this.msgss = 'display'
      } else {
        this.msgss = 'message'
      }
    }
   } 

<!-- 使用elementui的翻譯包 -->
<h1>使用方式五：elementui的翻譯包</h1>
<h4>{{$t('el.colorpicker.confirm')}}</h4>

   <!-- 切換語言 -->
   <h1>切換語言方式</h1>
   <button @click="switchLang">切換語言</button>
   <el-select @change="langChange" placeholder="請選擇語言">
      <el-option v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
      </el-option>
    </el-select>

   options:[
        {
          value:'zh',
          label:'中文'
        },
        {
          value: 'en',
          label: 'English'
        }
   ],
   
   switchLang(){
      // 讀取緩存
      let lang = localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh'
      if (lang === 'zh') {
        this.$i18n.locale = 'en'
        localStorage.setItem('lang', 'en') // en表示英文，zh表示中文，可根據(jù)自己喜好設定，盡量通俗易懂
      } else {
        this.$i18n.locale = 'zh'
        localStorage.setItem('lang', 'zh')
      }
      location.replace(location) //刷新網(wǎng)頁
    },

    langChange(e){
      // this.$nextTick無法修改方式三
      this.$nextTick(() => {
        localStorage.setItem('lang', e)
        this.$i18n.locale = e
      })
      // location.replace(location)
    },