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

최근 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 'vue-i18n'
Vue.use(VueI18n)

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

new Vue({
  el: '#app',
  ...
  i18n
})

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

Use i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

as:

• 다른 언어의 경우, 디스플레이 다른 형식

• 디스플레이를 제어하기 위해 맞춤 변수가 전달되는 경우

• ... 자세한 내용은 공식 문서를 참조하세요.

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

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

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

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

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

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

cn .js

export default {
  common: {
    message: '消息'
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: 'Messages'
  },
  xxx: {
  }
}

index.js

import cn from './lib/cn.js'
export default {
  cn,
  us
}

대체 텍스트

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

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

관련 기사:

JS는 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현합니다.

EL 표현식을 사용하여 JS에서 컨텍스트 매개변수 값을 얻는 방법

jQuery는 더 많은 텍스트를 구현합니다. 1줄 이상, 2줄 이상 줄수 지정시 자동으로 줄임표 추가하는 방법

위 내용은 vue 프로젝트 국제화 vue-i18n 설치 및 사용 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!