Vue 프로젝트를 국제적으로 개발하는 방법

이번에는 Vue 프로젝트를 국제적으로 발전시키는 방법과 Vue 프로젝트의 국제적인 발전을 위한 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

Vue로 구축한 프로젝트에서는 element-ui 플러그인을 자주 사용합니다. 이전 블로그에서 vue-i18n 플러그인을 사용하는 방법에 대해 자세히 설명했습니다. , 프로젝트 플러그인에서 element-ui를 사용하는 경우 플러그인의 언어 및 텍스트 대체를 element-ui 플러그인과 결합할 수 있습니다. element-ui 플러그인 자체도 언어 팩을 제공합니다. 구체적인 구성 및 사용법은 다음과 같습니다.

기본적으로 vue 프로젝트를 빌드했습니다. vue 프로젝트에 vue-i18n 및 element-ui 플러그인을 설치합니다.

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

프로젝트 파일에서 언어 팩 폴더 i18n을 만듭니다. 아래 그림과 같이 폴더

main.js에 i18n.js를 도입하고, i18n.js

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 폴더에 langs

index.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

en.js를 도입합니다.

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

cn.js

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

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

추천 자료:

Vue를 최적화하는 방법

WeChat 애플릿의 캐러셀 이미지를 적응형 높이로 설정하는 방법

위 내용은 Vue 프로젝트를 국제적으로 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!