文
章
目
录
章
目
录
本文主要讲解关于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
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),学习愉快哦!