vue项目实现中英文等多语言版本（vue-i18n）

蕾娜
449 阅读2分钟
  1. 环境搭建

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

npm install vue-i18n --save

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

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

lang.png

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）

  1. 项目引入

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

入下图

main.js

mainjs.png

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

elementuijs.png

  1. 项目使用

在中文翻译文件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")

001.png

002.png

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

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

如果有报错可参考这篇文章：

vue中使用 i18n 遇到的问题：blog.csdn.net/weixin_4603…

avatar
文章
阅读
粉丝