Vue：i18n國際化語言加載

不廢話，直接開始！

第一步：

cnpm install vue-i18n
           

第二步：min.js中

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    'zh': require('@/assets/internationalization/zh.json'), //在靜态資源檔案中建立國際化語言包
    'en': require('@/assets/internationalization/en.json')  //路徑随意
  }
})

new Vue({
  el: '#app',
  router,
  i18n, //i18n 執行個體
  components: { App },
  template: '<App/>'
})
           

第三步：定義語言包（按需定義）

//zh.json中　定義如下翻譯
{
    "home":{
        "describe":"這是一個i18n測試頁",
        "cut":"切換"
    }
}

//en.json中 定義如下翻譯
{
    "home": {
        "describe":"This is i18n Test",
        "cut":"cut"
    }
}
           

第四步調用國際化翻譯：

<template>
	<div>
		{{$t("home.describe")}}
		<div><span @click="cutlanguage">{{$t("home.cut")}}</span>/{{this.$i18n.locale}}</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			cutlanguage(){
				console.log(this.$i18n.locale)//列印檢視目前語言包
				if(this.$i18n.locale=="en"){
					this.$i18n.locale="zh"
				}else{
					this.$i18n.locale="en"
				}
			},
		}
	}
</script>

<style>
</style>
           

附帶效果圖：