一、装置
npm install vue-i18n二、应用
在 src 下创立 lang 文件夹。
1、筹备语言包
本例我筹备了两种语言包，别离是中文和英文：zn、en。在 lang 下创立两个文件，zn.js 和 en.js。
// zn.jsexport default { main:{ message:"音讯", display:"展现" }};// en.jsexport default { main:{ message:"message", display:"display" }}2、筹备翻译的语言环境
在 lang 下创立 index.js，应用如上的两种语言包
import Vue from "vue";import VueI18n from 'vue-i18n'import zn from "./zn"import en from "./en"Vue.use(VueI18n); // 全局注册国际化包 // 筹备翻译的语言环境信息const i18n = new VueI18n({ locale: "zn", // 初始化中文 messages: { "zn":zn, "en":en }}); export default i18n3、实现语言翻译
在 main.js 中将 i18n 注入 vue 中
import i18n from './lang'new Vue({ el: '#app', router, store, i18n, // 注入，不能短少 components: { App }, template: '<App/>'})应用形式
（1）间接应用
<template> <div style="width: 100%;"> <div> <div> <span>{{$t('main.message')}}</span> </div> </div> </div></template>（2） 语言切换
<template> <div style="width: 100%;"> <div> <div> <span>{{$t('main.message')}}</span> <button @click="changeLang">切换语言</button> </div> </div> </div></template> <script>export default { methods: { changeLang() { if(this.$i18n.locale === 'zn'){ // 判断以后语言 this.$i18n.locale = 'en' // 设置以后语言 } else { this.$i18n.locale = 'zn' } } }}</script>三、整合 ElementUI 语言包
咱们能够整合 ElementUI 中存在的语言包。
1、扩大中文
// zn.jsimport zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包export default { main:{ message:"音讯", display:"展现" }, ...zhLocale};2、扩大英文
// en.jsimport enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包export default { main:{ message:"message", display:"display" }, ...enLocale}依据上图（语言包）取可翻译字段
<p>{{$t('el.colorpicker.confirm')}}</p> // 中文“确定”，英文“OK”四、问题记录
报错的起因次要是因为以后应用的版本不匹配，解决方案入下。
npm install vue-i18n@8》》》vue-i18n应用计划梳理，可供参考应用