相信很多前端开发工作人员在开发过程中,由于产品的国际化,必然会面临项目的国际化配置问题,这里笔者分享下自己使用vue框架如何进行国际化配置;
- vue项目初始化
- 安装依赖
- 国际化配置
(一)vue项目初始化
之前笔者已经介绍过如何使用vue-cli2和vue-cli4,还不熟的朋友可以先去查看如何进行项目初始化;
vue init webpack vue-i18n-pro;//vue-cli2初始化项目
vue create vue-i18n-pro;//vue-cli4初始化项目
(二)安装依赖
yarn add vue-i18n;//这里使用的是vue-i18n组件进行国际化;
yarn add elemnt-ui;//这里笔者使用的element-ui,若使用是别的组件可查看相关官方文档学习如何配置国际化
(三)国际化配置
1.src文件夹下创建i18n文件夹,内容如下:
各文件内容如何如下:
index.js内容:
import Vue from "vue"; //引入依赖
import VueI18n from "vue-i18n";//引入国际化依赖
import en from "./langs/en.js";//引入英文
import zh from "./langs/zh-cn.js";//引入中文
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: window.localStorage.getItem("lang") || "zh",//默认使用中文
messages: {
en,
zh
}
})
export default i18n;
en.js内容:
import enLocale from "element-ui/lib/locale/lang/en.js";//引入element-ui中的英文内容
const localEnLocale = {
...enLocale,
moudleA: {
title:"this is my sister"
},//自定义英文内容需与中文属性名一只
placeholder: {
}
}
export default localEnLocale;
zh-cn.js内容:
import zhLocale from "element-ui/lib/locale/lang/zh-CN.js";
const localZhLocale = {
...zhLocale,
moudleA: {
title:"这是我姐姐"
},
placeholder: {
}
}
export default localZhLocale;
2.mian.js进行配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import i18n from "./i18n";
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
});
3.组件中使用国际化
<template>
<div class="home">
<div>{
{$t("moudleA.title")}}</div>
</div>
</template>
至此,可以在浏览器端动态设置localStorage.setItem(“lang”,“en”),然后刷新页面即可查看效果。有什么问题欢迎大家交流!