vue-i18n实现中英文等多语言国际化版本

文
章
目
录

• 1.环境搭建
• 2. 项目增加国际化翻译文件
• 3.项目引入
• 4.项目使用

本文主要讲解关于vue-i18n实现中英文等多语言国际化版本相关内容，让我们来一起学习下吧！

1.环境搭建

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

npm install vue-i18n --save

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

在项目的src下添加lang文件夹增加中文翻译文件（zh.js）以及英文翻译文件（en.js），里面分别存储项目中需要翻译的信息。

index.js

import Vue from \"vue\";
import VueI18n from \"vue-i18n\";
import Cookies from \"js-cookie\";
import elementEnLocale from \"element-ui/lib/locale/lang/en\"; // element-ui lang
import elementZhLocale from \"element-ui/lib/locale/lang/zh-CN\"; // element-ui lang
import enLocale from \"./en\";
import zhLocale from \"./zh\";

Vue.use(VueI18n);

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale,
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
  },
};

const i18n = new VueI18n({
  locale: Cookies.get(\"language\") || \"zh\", // set locale
  messages, // set locale messages
});

export default i18n;

en.js

export default { 
    // 导航栏 
    topbar: { home: \"home\", },
};

zh.js

export default { // 导航栏 topbar: { home: \"首页\", }, };

如果项目中还需要兼容其他语言版本，相应得添加对应的翻译文件即可（例如日语jp.js）

3.项目引入

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

如下图：main.js

引入elementui的地方也需要配置国际化

4.项目使用

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

• Zh_CN.js:
• EN.js:

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

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

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

如果是html 显示的，就改用以下写法：

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

js :

this.$i18n.t(\"message.title\"); 
// this.$t报错的时候可以使用下面这种方式 
import i18n from \"./../lang\"; 
i18n.t(\"message.messageBoxTitle\")

选择语言之后把记录存在cookie里面。

再次打开浏览器访问项目初始化的时候从cookie里面得到之前选择的语言。

以上就是关于vue-i18n实现中英文等多语言国际化版本相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！