Vue：vue如何配置国际化

相信很多前端开发工作人员在开发过程中，由于产品的国际化，必然会面临项目的国际化配置问题，这里笔者分享下自己使用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”),然后刷新页面即可查看效果。有什么问题欢迎大家交流！