Vue.js 프로젝트 전단 다 중 언어 방안 의 사고 와 실천
1.일반적으로 어떤 내용 을 처리 해 야 합 니까?
전체적으로 말 하면 하나의 웹 응용 에서 다 중 언어 전환 을 해 야 하 는 내용 은 다음 과 같은 부분 을 포함한다.
1.템 플 릿 의 내용,예 를 들 어 Vue.js 의탭 의 텍스트 내용
2.JS 코드 의 문자 내용
3.그림 속 의 문서 내용
4,페이지 제목
5.제3자 구성 요소 중의 문안(예 를 들 어 제 프로젝트 에 Vux 구성 요 소 를 사 용 했 습 니 다)
6.백 엔 드 인터페이스 에서 전단 에 보 여 줘 야 할 데이터 내용
7.백 엔 드 인터페이스 에서 돌아 오 는 오류 알림
2.기본 적 인 사고
1.우선,어떤 방식 으로 현재 어떤 언어 를 보 여 줘 야 하 는 지 확인 해 야 합 니 다.
제 가 사용 한 것 은 URL 로 전달 하 는 것 입 니까?lang=en 또는?lang=zh-CN 과 같은 전달 매개 변수 형식.이렇게 하면 링크 를 통 해 어떤 언어 를 사용 할 지 지정 할 수 있다 는 장점 이 있다.하지만 주소 표시 줄 파라미터 에 만 의존 하 는 것 도 불편 하 다.예 를 들 어 페이지 를 돌 릴 때 이 주소 표시 줄 의 인 자 를 잃 어 버 릴 수 있 습 니 다.이것 은 페이지 를 뛰 어 넘 은 후에 어떤 언어 로 보 여 줘 야 할 지 모 르 게 할 것 이다.이상 적 인 방식 은 특정한 페이지 에 들 어 갈 때 이 매개 변 수 를 가지 고 있 는 것 입 니 다.(이 럴 때 어떤 언어 를 사용 해 야 하 는 지 얻 을 수 있 습 니 다)다른 페이지 로 넘 어 갈 때 이 lang 인 자 를 가지 고 있 지 않 아 도 됩 니 다.이 때 는 어떤 언어 를 사용 해 야 하 는 지 이미 알 고 있 기 때 문 입 니 다.따라서 첫 번 째 페이지 에 들 어 갈 때 이 매개 변 수 를 저장 해 야 합 니 다.예 를 들 어 localstorage 에 존재 하고 vuex 의 state 에 존재 합 니 다.
여기 서 언어 판단 의 우선 순위 문 제 를 끌 어 낸다.
주소 표시 줄 에 lang 인자 가 있 을 수 있 기 때문에 localstorage 에 도 관련 저장 필드 가 있 을 수 있 습 니 다.(지난번 에 이 프로그램 에 방 문 했 기 때 문 입 니 다)기본 강등 언어 를 설정 하고 싶 을 수도 있 습 니 다.등등.그 우선 순 위 는 어떻게 처리 해 야 합 니까?
정확 한 우선 순 위 는:
주소 표시 줄 인자 에 있 는 지 확인 하기;
localstorage 에 있 는 지 확인 하기;
그 다음 에 navigator.languge 를 통 해 브 라 우 저 기본 언어 를 가 져 옵 니 다.응용 프로그램 이 지원 하 는 언어 인지,만약 에 사용 합 니 다.
마지막 으로 리 턴 언어(예 를 들 어 통용 되 는 영어)를 사용 하 는 것 이다.
물론 당신 은 당신 의 요구 에 따라 간소화 할 수 있 습 니 다.
2.그 다음 에 어떤 도 구 를 사용 하여 언어 전환 과 포장 문 제 를 해결 합 니까?
(1)i18n 관련 도구 의 선택―누가 다 중 언어 변환 함수(보통$t)를 제공 합 니까?
현재 국제 화 통용 방식 은 대부분이 i18n 을 바탕 으로 하기 때문에 우 리 는 더 이상 바퀴 를 만 들 필요 가 없다.그러나 i18n 의 구체 적 인 사용 에 있어 서 는 NPM 모듈 이 많이 다르다.예 를 들 어 vuex-i18n,vue-i18n,simplest-i18n 등 이다.대부분의 복잡 한 항목 이 vuex 에 올 라 가기 때문에 복잡 한 항목 은 vuex-i18n 을 선택 하 는 것 이 vue-i18n 보다 편리 합 니 다.
그리고 simplest-i18n 이라는 작은 모듈 도 좋 은 점 이 있 습 니 다.다음 과 같은 쓰 기 를 지원 합 니 다:
템 플 릿 에서:
<span>$t(' ', 'Real Name')</span>
this.$t(' ', 'Real Name')
그 기본 사용 은 다음 과 같다.
t.js 파일:
import i18n from 'simplest-i18n';
import getLang from '../../getLang';
const t = i18n({
locale: getLang.lang, //
locales: getLang.langs //
});
export default t;
import t from './t';
Vue.$t = Vue.prototype.$t = t;
그러나 큰 프로젝트 에 있어 서 언어 패 키 지 를 코드 에 적어 서 유지 에 우호 적 이지 않 습 니 다.그리고 그것 으로 도 내 가 사용 하 는 Vux 구성 요소 의 다 중 언어 화 문 제 를 해결 할 수 없다.
그래서 결국 나 는 vuex-i18n 을 기초 로 했다.
(2)언어 패 키 지 를 조직 하고 처리 하 는 도구―언어 패 키 지 는 어떻게 조직 하고 어떻게 포장 하여 처리 합 니까?
이 문제 에 대해 저 는 먼저 Vux 제3자 구성 요소 의 다 국어 화 문 제 를 해결 해 야 합 니 다.
우선 언어 팩 의 조직 에 서 는 JSON 프로필 로 쓰 는 것 이 흔 하 다.그러나 나 는 최종 적 으로 Yaml 라 는 형식 을 사용 했다.그것 은 다 중 언어 필드 를 함께 쓰 는 것 을 지원 한다.예 를 들 면:
config.yml
confirm:
zh-CN:
en: confirm
확인:확인
confirm: confirm
이렇게 가 져 온 장점 은 한 필드 의 서로 다른 언어 버 전 을 편리 하 게 대조 할 수 있 고 특정한 필드 를 수정 하거나 삭제 할 때 도 한 곳 에서 완성 할 수 있 으 며 전환 할 필요 가 없다 는 것 이다.게다가 Yaml 파일 의 문법 도 더욱 간단명료 해 져 서 JSON 파일 은 반드시 더 블 따옴표 를 써 야 하고 주석 이 나타 나 면 안 되 는 등 많은 번 거 로 움 을 줄 였 다.
그 다음 에 언어 가방 의 포장 에 있어 서 저 는 vux-loader 를 찾 았 습 니 다.기 존의 웹 팩 설정 과 결합 하여 Vux 구성 요소 의 다 중 언어 설정 을 완성 할 수 있 을 뿐만 아니 라 사용자 정의 Vue 구성 요소 에서
<i18n>
confirm:
zh-CN:
en: confirm
<i18n>
그렇다면 Yaml 파일 은 어떻게 처리 합 니까?json-loader 와 Yml-loader 를 사용 할 수 있 습 니 다.이것 은 Yaml 파일 을 우리 가 필요 로 하 는 json 형식 으로 변환 하여 JS 함수 에서 사용 하기에 편리 합 니 다.이렇게:
const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml'); // 이것 은 언어 패키지 의 제 이 슨 형식 을 얻 었 다.
3.백 엔 드 인터페이스 에 어떤 언어의 데 이 터 를 되 돌려 주 는 지 어떻게 알려 줍 니까?
많은 인터페이스 가 백 엔 드 에 어떤 언어 를 사용 하 는 지 알려 야 하기 때문에 저 는 header 헤드 를 사용 하 는 방식 을 선 택 했 습 니 다.axios 의 interceptor 에 헤더 헤더:Accept-language 를 통일 적 으로 추가 하고 이 값 의 내용 을 전단 에서 사용 할 언어(예 를 들 어 zh-CN 또는 en 등)로 설정 합 니 다.이렇게 해서 한 곳 에 집중 하여 이 문 제 를 처리 해 버 렸 다.
3.구체 적 인 실천 중의 세부 사항
1.현재 어떤 언어 를 사용 해 야 하 는 getLang 모듈 의 실현 가 져 오기
import { getQueryObj } from '../utils/url';
import { setItem, getItem } from '../utils/storage';
const langs = ['zh-CN', 'en']; //
const defaultLang = 'en'; // ，
function getLang() {
let queries = getQueryObj();
let storeLang = getItem('lang');
let rawLang;
let flag = false;
if (queries && queries['lang']) {
rawLang = queries['lang'];
setItem('lang', rawLang);
} else {
rawLang = storeLang || navigator.language;
}
langs.map(item => {
if (item === rawLang) {
flag = true;
}
});
return flag ? rawLang : defaultLang;
}
const lang = getLang(langs, defaultLang);
export default {
lang, //
langs //
}
Vux 의 공식 github 에서 src/locales/all.yml 복사 본 을 찾 을 수 있 습 니 다.
그 다음 에 응용 프로그램의 입구 파일 에 도입 합 니 다.
const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');
webpack.dev.conf.js 중:
resolve(vuxLoader.merge(devWebpackConfig, {
plugins_dir: [
'vux-ui',
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en','zh-CN']
}
]
}))
resolve(vuxLoader.merge(buildWebpackConfig, {
plugins_dir: [
'vux-ui',
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en','zh-CN']
}
]
}))
extractToFiles:'src/locales/coponents.yml'은 사용자 정의 구성 요소 에 사용 할
그리고 응용 프로그램의 입구 파일 에 이 언어 패키지 파일 을 도입 합 니 다.
const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');
(1)구성 요소 내부 의 문안 을 사용자 정의 하 는 다 중 언어 화 정 보 는 구성 요소 의
(2)페이지 의 제목,오류 알림 등 문안 은 구성 요소 이외 의 것 이기 때문에 구성 요소 의
그리고 응용 프로그램의 입구 파일 에 이 언어 패키지 파일 을 도입 합 니 다.
const componentsLocales = require('json-loader!yaml-loader!../../locales/global.yml');
src/store/index.js 파일 에서:
import VuexI18n from 'vuex-i18n';
i18n: VuexI18n.store
import VuexI18n from 'vuex-i18n';
import getLang from '../../getLang';
Vue.use(VuexI18n.plugin, store);
const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');
const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');
const finalLocales = {
'en': Object.assign(vuxLocales['en'], componentsLocales['en']),
'zh-CN': Object.assign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}
for (let i in finalLocales) {
Vue.i18n.add(i, finalLocales[i])
}
Vue.i18n.set(globalVars.lang);
그림 속 의 문안 정보 에 대해 다 언어 화 는 주로 이런 두 가지 방식 이 있다.하 나 는 서로 다른 언어 에 따라 서로 다른 그림 을 보 여 주 는 것 이다.둘째,문 자 를 그림 배경 에서 분리 시 키 고 문자 층 에 배경 그림 층 을 추가 하 는 방식 으로 문자 층 은 일반 텍스트 로 다 국어 화 를 실현 할 수 있다.모두 비교적 간단 해서 더 이상 군말 하지 않 는 다.
7.현재 페이지 에서 단 추 를 통 해 현재 언어 를 전환 한 후 현재 페이지 의 내용 을 어떻게 업데이트 합 니까?
만약 응용 프로그램 이 페이지 내부 에서 언어 버 전 을 전환 할 필요 가 없다 면 URL 을 통 해 서로 다른 lang 인 자 를 직접 입력 하면 됩 니 다.이 문 제 는 언급 되 지 않 습 니 다.
첫 번 째 방법:페이지 새로 고침
<button @click="changeLang('zh-CN')"> </button>
<button @click="changeLang('en')"> </button>
changeLang(lang){
location.href = this.$utils.url.replaceParam(this.$router.history.current.path, 'lang', lang);
},
data(){
return {
lang: this.$i18n.locale()
}
}
changeLang(lang){
this.$i18n.set(lang);
this.lang = this.$i18n.locale();
},
watch: {
lang(newVal, oldVal) {
if(newVal === oldVal) {
return;
}
// v-if
}
}
구체 적 으로 자신의 업무 수요 에 따라 선택 하 다.
8.Yaml 의 특수 문자 의 전의
특수 문 자 를 포함 하 는 Yml 키 값,예 를 들 어[,]등 은 전의 가 필요 합 니 다.전환 방식 은 키 에 작은 따옴표 를 붙 여 일 으 키 는 것 이다.
언어 패키지 정보 에 작은 따옴표 가 있다 면 두 개의 작은 따옴표 전 의 를 연속 으로 사용 해 야 합 니 다.예 를 들 면:
str: 'labor''s day'
총결산
Vue.js 프로젝트 의 전단 다 중 언어 방안 에 대한 사고 와 실천 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue.js 전단 다 중 언어 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
