1、安装vue-i18n依赖包

npm install vue-i18n@8


2、新建语言包文件

1、新建文件夹（任意命名） lang
2、在 lang 文件夹下新建三个js文件：zh.js  en.js  index.js
	
		（1）zh.js
			
			export default {
			  common: {
				input: '请输入'
			  }
			}

------------------------------------------------------------------

		（2）en.js
			export default {
			  common: {
				input: 'please input'
			  }
			}
			
------------------------------------------------------------------
		（3）index.js
		
			import Vue from 'vue'

			// 引入自己的语言包
			import chinese from './zh' // 中文
			import english from './en' // 英文

			// 国际化
			import VueI18n from 'vue-i18n'
			Vue.use(VueI18n)

			// 配置i18n语言包
			const messages = {
			  en: {
				message: 'hello',
				...english // 或者用 Object.assign({ message: 'hello' }, enLocale)
			  },
			  zh: {
				message: '你好',
				...chinese // 或者用 Object.assign({ message: '你好' }, zhLocale)
			  }
			}

			// 创建国际化实例
			const i18n = new VueI18n({
			  // 设置中文为默认语言
			  locale: localStorage.getItem('locale') || 'zh', // set locale
			  // 添加多语言（每一种语言标识对应一个语言文件）
			  messages, // set locale messages
			  fallbackLocale: 'zh', // 若某个语言环境变量，则使用fallbackLocale环境下对应的变量
			  silentFallbackWarn: true, // 抑制警告
			  globalInjection: true // 全局注入
			})

			export default i18n


3、在 main.js 引入语言包并挂载到 vue 实例上

// 引入语言包
import i18n from '@/lang/index'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n, // 挂载
  template: '<App/>',
  components: { App }
})
	
    
/** 到这一步配置成功的话，则页面就实现国际化！ */


4、配置全局切换语言组件

（1）
	// 一键切换全局语言
  <el-form-item label="切换语言">
    <el-radio-group v-model="switchLanguage">
      <el-radio :label="'zh'" border>中文</el-radio>
      <el-radio :label="'en'" border>英文</el-radio>
    </el-radio-group>
  </el-form-item>

（2）
	// 计算属性
	computed: {
		switchLanguage: {
		  get () { return this.$store.state.common.switchLanguage },
		  set (val) {
			// 使用Vuex存储语言
			this.$store.commit('common/updateSwitchLanguage', val)
			// （关键）立即改变页面的语言类型展示
			this.$i18n.locale = val
		  }
		}
	}

（3）
	// Vuex中的变量
	switchLanguage: localStorage.getItem('locale') || 'zh'

（4）
	// Vuex中的修改方法
	updateSwitchLanguage (state, language) {
		console.log('state === ', state)
		console.log('language === ', language)
		state.switchLanguage = language
		localStorage.setItem('locale', language)
	}