您现在的位置:首页 >> 前端 >> 内容

Vue国际化处理vue-i18n以及项目自动切换中英文

时间:2017/8/9 9:00:13 点击:

  核心提示:1.环境搭建命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18nNpm install vue-i18n --save2.项目增加国际化翻译文件在项目的src/common/lang增...

1.环境搭建

命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n

Npm install vue-i18n --save

2.项目增加国际化翻译文件

在项目的src/common/lang增加中文翻译文件(zh_CN.js)以及英文翻译文件(EN.js),里面分别存储项目中需要翻译的信息。

3.项目引入

在项目的main.js中引入vue-i18n插件,引入对应的翻译文件(zh_CN.js/EN.js)引入并结合Element-UI 国际化。

Vue国际化处理vue-i18n以及项目自动切换中英文

上面有AppLanguage方法,可以传入 zh 或者 en,自动切换项目语言,可以在其他组件中直接调用。调用是直接写上 AppLanguage('zh');

4.项目使用

在中文翻译文件zh_CN中引入Element-UI的中文脚本,在英文翻译文件EN中引入Element-UI的英文脚本,并且在文件中加入要翻译的内容,具体如下:

Zh_CN.js:

Vue国际化处理vue-i18n以及项目自动切换中英文

EN.js:

Vue国际化处理vue-i18n以及项目自动切换中英文

然后在要翻译的地方进行翻译。

如果是element-ui 的,在要翻译的前面加上冒号

比如:label=“用户姓名” 就改成 :label=”$t(‘order.userName’)”

Vue国际化处理vue-i18n以及项目自动切换中英文

如果是html 显示的,就该用以下写法:

Vue国际化处理vue-i18n以及项目自动切换中英文

直接写成{{$t(‘export’)}},就会直接去往翻译脚本里面自动匹配。

Tags:VU UE E国 国际 
作者:网络 来源:Syd丶