Vue + Element UI + i18n国际化

前提

前端项目使用的框架是VUE。需要增加国际化功能。

安装element-ui以及vue-i18n

命令： npm install element-ui -S //安装element

命令： npm install vue-i18n //安装i18n

建立本地语言包

【src/language/en.js】

【src/language/zh.js】

在src下面创建一个language的文件夹（放置位置，文件命名可以自定义），新建en.js, zh.js文件。

注意：en.js, zh.js里面的结构以及变量命名必须保持一致。

在main.js中引入相关信息

【src/main.js】

引入vue, vue-i18n, element-ui

注册i18n

通过按钮控制语言切换

【src\components\common\Header.vue】

我们将切换语言按钮添加到登录后的header.vue里面。

前端UI样式：
JS方法实现：
备注：添加缓存功能的好处就是，每次刷新页面，语言不会又切成默认语言了。

数据渲染

JS中渲染
在js里面使用要使用以下格式：this.$t(’’)

DOM中渲染
方式一： 标签文本使用以下格式：$t(’’)

方式二：在标签属性前面加：， 然后使用以下格式：$t(’’)

踩坑提醒

踩坑一：将this.$t() 写到了data属性里，切换语言不起作用

原因：data是一次性生成的，写在data里面只是在data初始化的时候生效，并不能响应变化。

踩坑二：改变窗口的title，注意实现方案以及切换时要调用窗口标题变更
原代码：从router\index.js中拿title的字符串，然后与Automagic拼接起来显示。
【src\router\index.js】

【src\main.js】

代码实现：套用渲染的格式就是 $t{(}^{\prime }title.dashboar{d}^{\prime })这种。因此我们需要更改main.js代码为：${i18n.t(to.meta.title)}， 然后在index.js中用字符串的形式应用语言包中的变量：‘title.dashboard’。

然后切换语言变更一下对应窗口的语言：

【src\components\common\Header.vue】

踩坑三：tags在语言切换后，已经点开的不会更改语言

原代码：Tags里面的title也是从router\index.js中拿title的字符串。

【src\components\common\Tags.vue】


错误实现方案：

代码实现：因此我们需要更改引用title的地方的代码，套用渲染的格式从语言包中拿对应的值。