vue国际化插件

1. 第一步：安装 npm i -S vue-i18n
2. 第二步：在assets文件夹下创建lang文件夹，在里边创建en.json和zh.json文件

{  // en.json
    	       "common":{
        	       	"home":"home",
        	       	"info":"info"
    	        }
	}

{  // zh.json
    	        "common":{
        		"home":"首页",
        		"info":"信息"
    	         }
	}

3. 第三步 ：在src下创建一个 plugins 文件夹，里边创建 i18n.js 文件并配置

import Vue from 'vue'
	import VueI18n from 'vue-i18n'
	Vue.use(VueI18n) ;
	const i18n = new VueI18n({
    	       locale:"zh",  //默认设置中文
    	       messages:{
        		zh : require("@/assets/lang/zh.json"), //中文@代表当前文件夹的根目录
        		en : require("@/assets/lang/en.json") //英文
    	        }         
	})
	export default i18n;

4. 第四步：将 i18n.js 文件引入 main.js 中

import i18n from './plugins/i18n'
	//挂载到Vue实例
	new Vue({
  	    render: h => h(App),
  	    i18n,
	}).$mount('#app')

5. 第五步 : 在组件中使用

<template>
  	      <div class="hello">
    		<p>{{ $t("common.home") }}</p>
    		<p>{{ $t("common.info") }}</p>
    		<button @click="qieHandle">切换语言</button>
  	      </div>
	</template>

	<script>
	export default {
  	      name: 'HelloWorld',
  	      methods:{
    		qieHandle(){
      		       let lang = this.$i18n.locale === "zh" ? "en" : "zh";
      		       this.$i18n.locale = lang;
    		}
  	         }
	   }
	</script>

获取浏览器默认语言语法：navigator.language