Vue：i18n国际化语言加载

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/84974261

不废话，直接开始！

第一步：

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>

附带效果图：