(4) 多语言就是这么简单

目标：实现前端多语言

经过前面三章，想必大家对于使用vue和element已经有了极大的信心，这很好

本章我们演示下如何实现中日英三种语言的切换

老规矩，我们还是先看官网，找找思路

可以看到，实现多语言，是用了vue-i18n这个插件

并且我们注意到，这个i18n有5.x 和其他的版本，处理方式有区别

我们先安装vue-i18n这个库，方法和安装element很相似

先打开一个新的Terminal窗口

输入安装命令 npm install vue-i18n -save,回车

很快安装好了。打开package.json文件，确认下版本。

（如安装时有怪问题，可尝试将整个项目目录的权限，对所有用户设置为“完全控制”,

安装包出现混乱时，可关闭idea，删除node_modules目录下所有文件，打开项目，执行cnpm install）

第一步，先在src目录下创建一个langs目录，里面放我们自定义的多语言资源文件

先创建简体中文的，命名为zh-CN.js

注意这个名字不是乱写的，参考文档https://element.eleme.cn/#/zh-CN/component/i18n ，最底下有

同样的，我们创建en.js和ja.js两个文件，内容是英文和日文

然后我们在langs下添加index.js文件，内容如下

import Vuefrom 'vue'

import VueI18nfrom 'vue-i18n'

import elementEnLocalefrom 'element-ui/lib/locale/lang/en' // element-ui lang

import elementZhLocalefrom 'element-ui/lib/locale/lang/zh-CN'// element-ui lang

import elementJaLocalefrom 'element-ui/lib/locale/lang/ja'// element-ui lang

import enLocalefrom './en'

import zhLocalefrom './zh-CN'

import jaLocalefrom './ja'

Vue.use(VueI18n)

let lang ='zh-CN' //默认中文

Vue.config.lang =lang

// vue-i18n 6.x+写法

Vue.locale = () => {}

const messages = {

'zh-CN':Object.assign(elementZhLocale, zhLocale),

'en':Object.assign(elementEnLocale, enLocale),

'ja':Object.assign(elementJaLocale, jaLocale)

}

const i18n =new VueI18n({

locale:lang,

messages

})

export default i18n