Vue@3&Vue-i18n@9구문을 사용합니다.
먼저(하고 싶은 일과 경과)
나는 웹 페이지 등 다양한 언어에 대응하고 싶다.이때 다음 두 가지가 필요합니다.
<select>으로 자연 언어의 종류를 전환한다.document.getElementById("hoge").textContent = "This text is different!";는 번거롭고 가독성도 떨어진다.물론 똑똑하게 신경 써서 쓰면 더 쉽게 쓸 수 있지만 기회가 좋아 베.js[2]의 Vue I18n[3]을 사용해 보고 싶습니다.코드 & 실행 결과
컨디션
이용하는 환경이야.이번 코드는 Vue Ver입니다.2 및 Vue I18n 버전8잘 돌아가지 않을 거예요.Vue Ver.2&Vue I18n Ver.8의 작법은 찾아보면 많이 나올 테니 참고하세요.
브라우저의 자연 언어 형식을 가져오고 해당하는 정보를 표시합니다
Vue I18n의 공식 가이드[4]와 창고의 Issue[5]를 참고해 다음 코드를 적어 이동했다.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vue I18n Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
</head>
<body>
<div id="yokan">
<span> {{ $t("message.hello") }} </span>
</div>
</body>
<script>
/**
* ブラウザの設定言語を取得
*/
const langBrowser = navigator.language.split("-")[0];
console.log("使用されている言語は" + langBrowser + "です。");
const messages = {
en: {
message: {
hello: "Hi!",
},
},
ja: {
message: {
hello: "やあ！",
},
},
};
const i18n = VueI18n.createI18n({
locale: langBrowser,
fallbackLocale: "en",
messages,
});
const app = Vue.createApp({});
app.use(i18n);
app.mount("#yokan");
</script>
</html>
사용자가 "select" 를 사용하여 자연 언어의 종류를 전환합니다.
나중에 설명할게요. 이건 좀 곤란해요.우선, 확실히 이동할 코드와 실행 결과를 아래에 붙여 넣으십시오.일반적으로 정공법으로 여겨지는 것부터 붙이는 두 가지 방법이 있다.실행 결과가 거의 같기 때문에 마지막에 하나만 붙였다.
Vue.js의 양방향 귀속 방법을 사용합니다
Vue I18n 기반 설명서[6], Vue.js의 양방향 귀속 [7] 코드를 사용했습니다.나는 이것이 정공법이라고 생각한다.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vue I18n Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
</head>
<body>
<div id="yokan">
<span> {{ $t("message.hello") }} </span>
<select
v-model="selected"
name="lang"
class="legal-item"
id="select-lang"
v-on:change="switchLang"
>
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
</div>
</body>
<script>
/**
* ブラウザの設定言語を取得
*/
const langBrowser = navigator.language.split("-")[0];
console.log("使用されている言語は" + langBrowser + "です。");
const binding = {
data() {
return {
selected: langBrowser,
};
},
methods: {
switchLang() {
this.$i18n.locale = this.selected;
},
},
};
const messages = {
en: {
message: {
hello: "Hi!",
},
},
ja: {
message: {
hello: "やあ！",
},
},
};
const i18n = VueI18n.createI18n({
locale: langBrowser,
fallbackLocale: "en",
messages,
});
const app = Vue.createApp(binding);
app.use(i18n);
const vm = app.mount("#yokan");
</script>
</html>
이벤트 처리 프로그램을 통해 <select> 감시하고 변경 시locale 변경
이는 Vue I18n의 마법사[6:1]를 바탕으로 Stack overflow의 글[8]을 참고해 쓴 것이다.
다음 코드에 아주 좋은 댓글이 있어요. Vue와 Vue I18n의 설정은 이번에 소개한 코드와 똑같아요. 그런데 제 경우는요.
vm.$forceUpdate(); // なぜか必要な場合と、不要な場合がある。
vm.$forceUpdate(); 필요할 때와 필요 없을 때의 차이로 필요할 때 환경에서 사용하는 Vue와 Vue I18n은 npm으로 잡아당겼다*.prod.js.어쩌면 그런 방법일지도 모른다.아무리 생각해도 참고 기사를 찾지 못해 힘들다.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vue I18n Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
</head>
<body>
<div id="yokan">
<span> {{ $t("message.hello") }} </span>
</div>
<select name="lang" class="legal-item" id="select-lang">
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
</body>
<script>
/**
* ブラウザの設定言語を取得
*/
const langBrowser = navigator.language.split("-")[0];
if (langBrowser === "en" || langBrowser === "ja")
document.getElementById("select-lang").value = langBrowser;
else document.getElementById("select-lang").value = "en";
console.log("使用されている言語は" + langBrowser + "です。");
const messages = {
en: {
message: {
hello: "Hi!",
},
},
ja: {
message: {
hello: "やあ！",
},
},
};
const i18n = VueI18n.createI18n({
locale: langBrowser,
fallbackLocale: "en",
messages,
});
const app = Vue.createApp({});
app.use(i18n);
const vm = app.mount("#yokan");
/**
* <select>のイベントハンドラ
*/
document.getElementById("select-lang").addEventListener("change", () => {
vm.$i18n.locale = document.getElementById("select-lang").value;
vm.$forceUpdate(); // なぜか必要な場合と、不要な場合がある。
console.log(
"表示言語を" +
document.getElementById("select-lang").value +
"に変更しました。"
);
});
</script>
</html>
실행 결과
최후
쌍방향 귀속 방법을 사용해 손 옆 환경에서 문제 없이 이동했기 때문에 여기에 쓰면 된다.
7년 전쯤에 Polymer+Typerscript가 프레임워크의 버전 업그레이드와 통합성에 고통을 겪은 후에도 기본적인 기본 동작이 변하지 않는 것이 비교적 안심된다고 생각합니다.프레임을 함부로 사용하지 않고 웹의 표준 규격(HTML Living standard, CSS3, 자바스크립트, 웹 Components 등 브라우저에서만 실행되는 것들)을 사용하기로 했습니다. 그런데 요즘은 이용자가 많고 안정적인 프레임도 많아서 이 기회를 틈타 습관적으로 사용하려고 합니다.
각주
i18 next documentationhttps://www.i18next.com/(2022-04-22 열람)↩︎
Vue.js(Ver.3) 일본어https://v3.ja.vuejs.org↩︎
Vue I18n 일본어https://vue-i18n.intlify.dev/ja/index.html(2022-04-22 열람)↩︎
시작합시다/Vue I18nhttps://vue-i18n.intlify.dev/ja/guide/#javascript(2022-04-22 열람)↩︎
Default locale based on browser settings?/ (kazupon/
vue-i18n) Issuehttps://github.com/kazupon/vue-i18n/issues/220(2022-04-22 열람)↩︎
Scape and Locale Changing/Vue I18nhttps://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1(2022-04-22 열람)↩︎
사용자 입력 제어/Vuejs↩︎(2022-04-22열람)https://v3.ja.vuejs.org/guide/introduction.html#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%82%BF%E3%82%99%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%99
How can I translate app without reloading page in vue.js?/adib on stack overflow↩︎(2022-04-22 열람)https://stackoverflow.com/questions/55361211/how-can-i-translate-app-without-reloading-page-in-vue-js
Reference
이 문제에 관하여(Vue@3&Vue-i18n@9구문을 사용합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/akira_kashihara/articles/6a4c34f47ed980텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
