Creo que muchos miembros del personal de desarrollo front-end inevitablemente enfrentarán el problema de la configuración internacional del proyecto debido a la internacionalización del producto durante el proceso de desarrollo. Aquí, el autor comparte cómo usar el marco Vue para la configuración internacional;
- Inicialización del proyecto Vue
- instalar dependencias
- Configuración de internacionalización
(1) Inicialización del proyecto Vue
El autor ha presentado cómo usar vue-cli2 y vue-cli4 antes . Los amigos que no estén familiarizados con ellos pueden verificar primero cómo inicializar el proyecto;
vue init webpack vue-i18n-pro;//vue-cli2初始化项目
vue create vue-i18n-pro;//vue-cli4初始化项目
(2) Dependencias de instalación
yarn add vue-i18n;//这里使用的是vue-i18n组件进行国际化；
yarn add elemnt-ui;//这里笔者使用的element-ui，若使用是别的组件可查看相关官方文档学习如何配置国际化
(3) Configuración internacional
1. Cree una carpeta i18n en la carpeta src, el contenido es el siguiente:
El contenido de cada archivo es el siguiente:
contenido de 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;
contenido 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;
Contenido de 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 para configuración
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. Utilizar la internacionalización en los componentes.
<template>
<div class="home">
<div>{
{$t("moudleA.title")}}</div>
</div>
</template>
Hasta ahora, puede configurar dinámicamente localStorage.setItem("lang", "en") en el lado del navegador y luego actualizar la página para ver el efecto. Si tiene alguna pregunta, ¡bienvenido a comunicarse!