집 > 기사 > 웹 프론트엔드 > vue 프로젝트 국제화 vue-i18n 설치 및 사용 튜토리얼

vue 프로젝트 국제화 vue-i18n 설치 및 사용 튜토리얼

亚连원래의: 2018-05-30 11:57:352484검색

최근 Element-ui 컴포넌트 개발 프로젝트와 결합된 Vue.js 프레임워크를 학습하게 되었습니다. 최근 국제화 기능 구현의 필요성으로 인해 다음 기사에서는 vue 프로젝트의 국제화를 위한 vue-i18n 사용에 대한 관련 정보를 주로 소개합니다. 기사에서는 샘플 코드를 통해 자세히 소개합니다. .

머리말

프로젝트는 여러 언어를 지원해야 합니다. 프로젝트에 사용되는 정적 텍스트를 추출하고 이를 관리하려면 언어 패키지를 사용해야 합니다. 언어 설정을 전환할 때 전체 프로젝트의 텍스트 표시가 가능합니다. 자동으로 전환됩니다.

Vue 프로젝트에 해당 컴포넌트인 vue-i18n이 있는 것을 발견했는데, 프로젝트 코드를 크게 수정하지 않아서 이 컴포넌트를 사용하여 프로젝트의 코드를 수정했습니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

Installation

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

일반적으로 프로젝트는 패키지를 설치하여 실행되며, 스크립트가 소개되는 경우는 거의 없습니다.

프로젝트에서

Configure i18n을 사용하세요

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: &#39;cn&#39;, // 设置语言 
  messages // 语言包
})

new Vue({
  el: &#39;#app&#39;,
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: &#39;名字&#39;
  },
  us: {
    name： &#39;Name&#39;
  }
}

Use i18n

// html 需要使用 {{}} 将 name包装起来
{{$t(&#39;name&#39;)}}

// js
$t(&#39;name&#39;)

as:

다른 언어의 경우, 디스플레이 다른 형식
디스플레이를 제어하기 위해 맞춤 변수가 전달되는 경우
... 자세한 내용은 공식 문서를 참조하세요.

언어를 전환하면 내장 변수를 사용할 수 있습니다.

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

프로젝트에서 원본 정적 텍스트 생성 및 교체

이 단계가 가장 중요합니다. 모두 추출하세요. 한자 발생, $t('xxx')로 대체, 여러 버전의 언어 파일 유지

언어 패키지가 처리되는 방식입니다. 프로젝트 아래에 새로운 디렉토리에 언어 추가

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言，暂未实践
  -- index.js // 导出语言包

cn .js

export default {
  common: {
    message: &#39;消息&#39;
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: &#39;Messages&#39;
  },
  xxx: {
  }
}

index.js

import cn from &#39;./lib/cn.js&#39;
export default {
  cn,
  us
}

대체 텍스트

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>

위는 내가 모두를 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 될 것입니다.

vue 프로젝트 국제화 vue-i18n 설치 및 사용 튜토리얼

관련 기사