vue 프로젝트에서 vue-i18n 및 element-ui의 국제 개발을 실현하는 방법

이번에는 vue 프로젝트에서 vue-i18n과 element-ui의 국제적 발전을 실현하는 방법과, vue 프로젝트에서 vue-i18n과 element-ui의 국제적 발전을 실현하기 위한 notes가 무엇인지 알려드리겠습니다. 다음은 실제 사례를 살펴보겠습니다.

기본적으로 vue 프로젝트가 빌드되었습니다. vue 프로젝트installvue-i18n 및 element-ui 플러그인

cnpm i vue-i18n --save-dev 
cnpm i element-ui --save-dev

아래 그림과 같이 프로젝트 파일에 언어 팩 폴더 i18n 폴더

를 만듭니다.

main.js에 i18n.js와 element-ui 플러그인을 소개합니다.

import Vue from 'vue' 
import App from './App' 
import router from './router' 
// element-ui 
import Element from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
Vue.use(Element) 
// vuei18n 
import i18n from './i18n/i18n' 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 i18n, 
 components: { 
 App 
 }, 
 template: '<App/>' 
})

In i18n.js

import Vue from 'vue' 
import locale from 'element-ui/lib/locale' 
import VueI18n from 'vue-i18n' 
import messages from './langs' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: localStorage.lang || 'cn', 
 messages, 
}) 
locale.i18n((key, value) => i18n.t(key, value)) 
export default i18n

langs 폴더

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}

en.js

import enLocale from 'element-ui/lib/locale/lang/en' 
const en = { 
 message: { 
 'mes': 'hello', 
 }, 
 ...enLocale 
} 
export default en;

cn.js

import enLocale from 'element-ui/lib/locale/lang/zh-CN' 
const cn = { 
 message: { 
 'mes': '你好', 
 }, 
 ...enLocale 
} 
export default cn;

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue에서 필터를 사용하는 방법

vue를 사용하여 dom의 클래스를 결정하는 방법

위 내용은 vue 프로젝트에서 vue-i18n 및 element-ui의 국제 개발을 실현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!