>  기사  >  웹 프론트엔드  >  vue는 vue-i18n을 사용하여 국제화 코드를 구현합니다.

vue는 vue-i18n을 사용하여 국제화 코드를 구현합니다.

亚连
亚连원래의
2018-05-26 09:48:461699검색

이 글에서는 국제화를 달성하기 위해 vue-i18n을 사용한 vue 구현 코드를 주로 소개하고 참고하겠습니다.

Requirements

회사 프로젝트는 국제화되어야 합니다. 중국어/영어를 전환하려면 버튼을 클릭하세요

1. vue 인스턴스에 삽입하고 프로젝트에 호출 API 및 템플릿 구문을 구현합니다.

npm install vue-i18n --save

3. 해당 언어팩

zh.js 중국어 언어팩 :

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) ;

const i18n = new VueI18n({
  locale: 'zh-CN',  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   'zh-CN': require('./common/lang/zh'),  // 中文语言包
   'en-US': require('./common/lang/en')  // 英文语言包
  }
})

new Vue({
 el: '#app',
 i18n, // 最后
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})
en.js 영어 언어팩 :

export const lang = {
 homeOverview:&#39;首页概览&#39;,
 firmOverview:&#39;公司概述&#39;,
 firmReports:&#39;财务报表&#39;,
 firmAppendix:&#39;更多附录&#39;,
 firmIndex:&#39;主要财务指标&#39;,
 firmAnalysis:&#39;对比分析&#39;,
 firmNews:&#39;新闻事件档案&#39;,
 firmOther:&#39;其他功能&#39;,
}

4. 언어 전환 버튼 컨트롤 ​​

this.$i18n .locale, 'zh-CN'에 값을 할당하면 탐색 표시줄이 중국어가 되고, 값이 'en-US'이면 영어가 됩니다.

export const lang = {
 homeOverview:&#39;Home overview&#39;,
 firmOverview:&#39;firmOverview&#39;,
 firmReports:&#39;firmReports&#39;,
 firmAppendix:&#39;firmAppendix&#39;,
 firmIndex:&#39;firmIndex&#39;,
 firmAnalysis:&#39;firmAnalysis&#39;,
 firmNews:&#39;firmNews&#39;,
 firmOther:&#39;firmOther&#39;
}
<p class="top_btn" @click="changeLangEvent">中文</p>

5 템플릿 렌더링

정적 렌더링:

changeLangEvent() {
  console.log(&#39;changeLangEvent&#39;);
  this.$confirm(&#39;确定切换语言吗?&#39;, &#39;提示&#39;, {
   confirmButtonText: &#39;确定&#39;,
   cancelButtonText: &#39;取消&#39;,
   type: &#39;warning&#39;
  }).then(() => {
   if ( this.$i18n.locale === &#39;zh-CN&#39; ) {
    this.$i18n.locale = &#39;en-US&#39;;//关键语句
    console.log(&#39;en-US&#39;)
   }else {
    this.$i18n.locale = &#39;zh-CN&#39;;//关键语句
    console.log(&#39;zh-CN&#39;)
   }
  }).catch(() => {
   console.log(&#39;catch&#39;);
   this.$message({
    type: &#39;info&#39;,
   });
  });
 }

-ui 요소인 경우 번역하려는 항목 앞에 콜론을 추가하세요. 예: label="user name"이 다음으로 변경됩니다. label="$t('order.userName')"

동적 렌더링:

<span v-text="$t(&#39;lang .homeOverview&#39;)"></span>
<span>{{$t(&#39;lang .homeOverview&#39;)}}</span>

위에서 모든 사람을 위해 편집했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

JavaScript는 지정된 범위의 시간 목록을 생성합니다.

nodejs 메서드를 사용하여 express 기반 파일 업로드를 구현합니다.

webpack.config.js 매개 변수 세부 정보를 기반으로

위 내용은 vue는 vue-i18n을 사용하여 국제화 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.