Vue@3 및 Vue-i18n@9에서 웹사이트를 국제화하는 방법

23902 단어 javascriptvuevuei18nwebdev

이 문서에서 보여 주는 내용



  • I18n (Internationalization) 브라우저의 언어 설정에 따라
  • 사용자가 선택한 언어에 따른 I18n
  • 양방향 바인딩(Vue.js) 사용
  • addEventListener (Javascript) 사용


    • 소스 코드 및 결과



    이 기사의 모든 소스 코드는 정적 웹 페이지에서 작동합니다.

    환경


  • Vue.js Ver.3
  • Vue I18n Ver.9

    • 브라우저의 언어 설정에 따른 I18n



    이 소스코드는 Vue I18n official Guide과 Issues on its Github repository을 기반으로 구현되었습니다.

    <!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>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("Language setting in your browser is " + 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>

    결과는 다음과 같습니다.


    사용자가 선택한 언어에 따른 I18n



    이 섹션은 사용자가 <select> 태그를 사용하여 선택한 언어로 된 웹사이트를 보여줍니다. 이 문서는 "양방향 바인딩 사용(Vue.js)"및 "addEventListener(Javascript) 사용"의 두 가지 소스 코드를 나타냅니다.

    양방향 바인딩 사용(Vue.js)



    이 소스코드는 Vue I18n official Guide과 two-way binding in Vue.js을 기반으로 구현되었습니다.

    <!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">Japanese</option>
      </select>
    </div>
  </body>
  <script>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("The language setting in your browser is " + 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>

    결과는 다음과 같습니다.


    addEventListener 사용(Javascript)



    이 섹션의 소스 코드는 Vue I18n official Guide 및 the question in stack overflow을 기반으로 작성되었습니다.
    다음 소스 코드에서 Vue.js와 Vue I18n의 동일한 설정이라도 경우에 따라 이 줄이 필요합니다.

    vm.$forceUpdate(); // Some cases need it.

    이 줄이 npm을 사용하여 설치한 *.prod.js를 사용하는 내 환경에 필요한 경우입니다. 아마도 이것은 사양에 있을 수 있습니다. 전체 소스 코드는 다음과 같습니다.

    <!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">Japanese</option>
    </select>
  </body>
  <script>
    /**
     * Get the language setting in your browser.
     */
    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("The language setting in your browser is " + 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");

    /**
     * The event handler of <select>
     */
    document.getElementById("select-lang").addEventListener("change", () => {
      vm.$i18n.locale = document.getElementById("select-lang").value;
      vm.$forceUpdate(); // Some cases need it.
      console.log(
        "You change the language setting to " +
          document.getElementById("select-lang").value +
          "."
      );
    });
  </script>
</html>

    결과는 이것입니다.


    알아채다



    이 기사는 일본어로 작성된 다음 기사를 번역한 것입니다.





    Vue@3&Vue-i18n@9로<select>を使って言語切り替えをする方法




    zenn.dev
    JavaScript의 7가지 킬러 원라이너
    Laravel에서 포트폴리오 매장 관리 시스템을 만들었습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage