{"id":1174,"date":"2024-11-21T11:13:20","date_gmt":"2024-11-21T03:13:20","guid":{"rendered":"http:\/\/www.max-shu.com\/blog\/?p=1174"},"modified":"2024-11-21T11:13:21","modified_gmt":"2024-11-21T03:13:21","slug":"vue%e5%89%8d%e7%ab%af%e5%a2%9e%e5%8a%a0%e5%9b%bd%e9%99%85%e5%8c%96%e6%94%af%e6%8c%81","status":"publish","type":"post","link":"http:\/\/www.max-shu.com\/blog\/?p=1174","title":{"rendered":"VUE\u524d\u7aef\u589e\u52a0\u56fd\u9645\u5316\u652f\u6301"},"content":{"rendered":"\n

\u5b89\u88c5vue\u7684i18\uff1a<\/strong><\/p>\n\n\n\n

npm install vue-i18n@latest –save<\/p>\n\n\n\n

\u5728main.js\u4e2d\u589e\u52a0i18n\u7684\u652f\u6301\uff1a<\/strong><\/p>\n\n\n\n

import i18n from “@\/i18n”;<\/p>\n\n\n\n

const app = createApp(App)<\/p>\n\n\n\n

app.use(i18n);<\/p>\n\n\n\n

app.mount(‘#app’)<\/p>\n\n\n\n

\u5728stores\u91cc\u9762\u589e\u52a0LanguageStore.ts\uff1a<\/strong><\/p>\n\n\n\n

import { defineStore } from ‘pinia’;<\/p>\n\n\n\n

import zhCn from ‘element-plus\/dist\/locale\/zh-cn.mjs’<\/p>\n\n\n\n

import zhTw from ‘element-plus\/dist\/locale\/zh-tw.mjs’<\/p>\n\n\n\n

import en from ‘element-plus\/dist\/locale\/en.mjs’<\/p>\n\n\n\n

\/\/ \u521b\u5efa Pinia Store<\/p>\n\n\n\n

export const languageStore = defineStore(‘languageStore’, {<\/p>\n\n\n\n

  \/\/i18n\u63d0\u4f9b\u81ea\u5199\u4ee3\u7801\u56fd\u9645\u5316\uff0cel-config-provider\u63d0\u4f9belement plus\u7684\u56fd\u9645\u5316\u3002\u4ee5languageStore\u6700\u4e3a\u5a92\u4ecb\uff0c\u628a\u4e24\u8005\u5173\u8054\u8d77\u6765<\/p>\n\n\n\n

  state: () => {<\/p>\n\n\n\n

    return {<\/p>\n\n\n\n

        language: sessionStorage.getItem(“localeLang”) || “zhCn”,<\/p>\n\n\n\n

        languageElement: zhCn,<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

  actions:{<\/p>\n\n\n\n

    initElementLanguage(){<\/p>\n\n\n\n

      switch(this.language){<\/p>\n\n\n\n

        case “zhCn”: this.languageElement = zhCn; break;<\/p>\n\n\n\n

        case “zhTw”: this.languageElement = zhTw; break;<\/p>\n\n\n\n

        case “en”:   this.languageElement = en; break;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

    languageChange(value: string){<\/p>\n\n\n\n

      this.language = value<\/p>\n\n\n\n

      sessionStorage.setItem(“localeLang”, value)<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

});<\/p>\n\n\n\n

export type State = {<\/p>\n\n\n\n

    language: string;<\/p>\n\n\n\n

};<\/p>\n\n\n\n

export const state: State = {<\/p>\n\n\n\n

    language: sessionStorage.getItem(“localeLang”) || “zhCn”,<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\u5728App.vue\u4e2d\u589e\u52a0\uff1a<\/strong><\/p>\n\n\n\n

  import {languageStore} from ‘@\/stores\/LanguageStore’<\/p>\n\n\n\n

  let store = languageStore()<\/p>\n\n\n\n

  store.initElementLanguage()<\/p>\n\n\n\n

  const language = ref(store.languageElement);<\/p>\n\n\n\n

…<\/p>\n\n\n\n

<template><\/p>\n\n\n\n

<el-config-provider :locale=”language”><\/p>\n\n\n\n

  <div id=”appRoute”><\/p>\n\n\n\n

    <RouterView v-slot=”{ Component }”><\/p>\n\n\n\n

      <!– <transition> –><\/p>\n\n\n\n

        <keep-alive><\/p>\n\n\n\n

          <component :is=”Component” v-if=”$route.meta.keepAlive”\/><\/p>\n\n\n\n

        <\/keep-alive><\/p>\n\n\n\n

        <component :is=”Component” v-if=”!$route.meta.keepAlive”><\/component><\/p>\n\n\n\n

      <!– <\/transition> –><\/p>\n\n\n\n

    <\/RouterView><\/p>\n\n\n\n

  <\/div><\/p>\n\n\n\n

<\/el-config-provider>  <\/p>\n\n\n\n

<\/template><\/p>\n\n\n\n

\u5728src\u76ee\u5f55\u4e0b\u5efa\u7acbi18n\u76ee\u5f55\uff0c\u7136\u540e\u5efa\u7acbindex.ts\u6587\u4ef6\uff1a<\/strong><\/p>\n\n\n\n

import { createI18n } from “vue-i18n”;<\/p>\n\n\n\n

import zhCn from “.\/language\/zh-cn”;<\/p>\n\n\n\n

import zhTw from “.\/language\/zh-tw”;<\/p>\n\n\n\n

import en from “.\/language\/en”;<\/p>\n\n\n\n

const i18n = createI18n({<\/p>\n\n\n\n

    locale: sessionStorage.getItem(“localeLang”) || “zhCn”,<\/p>\n\n\n\n

    messages: {<\/p>\n\n\n\n

        zhCn,<\/p>\n\n\n\n

        zhTw,<\/p>\n\n\n\n

        en,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

});<\/p>\n\n\n\n

export default i18n;<\/p>\n\n\n\n

\u7136\u540e\u518di18n\u76ee\u5f55\u4e0b\u5efa\u7acb\u5404\u79cd\u8bed\u8a00\u7684\u7ffb\u8bd1\u6587\u4ef6\uff0c\u6bd4\u5982en.ts\uff1a<\/strong><\/p>\n\n\n\n

export default {<\/p>\n\n\n\n

    XianGuoZhi_TW: {<\/p>\n\n\n\n

        selectProducts: “Please select products: “,<\/p>\n\n\n\n

        selectPayChannel: “Please select pay channel: “,<\/p>\n\n\n\n

        purchase: “PURCHASE”,<\/p>\n\n\n\n

        ok: “OK”,<\/p>\n\n\n\n

        userId: “USER ID: “,<\/p>\n\n\n\n

        inputUserId: “Please input your user id in game: “,<\/p>\n\n\n\n

        placeholderUserId: “Please input”,<\/p>\n\n\n\n

        titleUserId: “Input User ID”,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\u6bd4\u5982zh-cn.ts\uff1a<\/strong><\/p>\n\n\n\n

export default {<\/p>\n\n\n\n

    XianGuoZhi_TW: {<\/p>\n\n\n\n

        selectProducts: “\u8bf7\u9009\u62e9\u5546\u54c1\uff1a”,<\/p>\n\n\n\n

        selectPayChannel: “\u8bf7\u9009\u62e9\u652f\u4ed8\u901a\u9053\uff1a”,<\/p>\n\n\n\n

        purchase: “\u8d2d\u4e70”,<\/p>\n\n\n\n

        ok: “\u786e\u5b9a”,<\/p>\n\n\n\n

        userId: “\u7528\u6237ID\uff1a”,<\/p>\n\n\n\n

        inputUserId: “\u8bf7\u8f93\u5165\u60a8\u5728\u6e38\u620f\u4e2d\u7684\u7528\u6237ID\uff1a”,<\/p>\n\n\n\n

        placeholderUserId: “\u8bf7\u8f93\u5165”,<\/p>\n\n\n\n

        titleUserId: “\u8f93\u5165\u7528\u6237ID”,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\u53c8\u6bd4\u5982zh-tw.ts\uff1a<\/strong><\/p>\n\n\n\n

export default {<\/p>\n\n\n\n

    XianGuoZhi_TW: {<\/p>\n\n\n\n

        selectProducts: “\u8acb\u9078\u64c7\u5546\u54c1\uff1a”,<\/p>\n\n\n\n

        selectPayChannel: “\u8acb\u9078\u64c7\u652f\u4ed8\u901a\u9053\uff1a”,<\/p>\n\n\n\n

        purchase: “\u8cfc\u8cb7”,<\/p>\n\n\n\n

        ok: “\u78ba\u5b9a”,<\/p>\n\n\n\n

        userId: “\u7528\u6236ID\uff1a”,<\/p>\n\n\n\n

        inputUserId: “\u8acb\u8f38\u5165\u60a8\u5728\u904a\u6232\u4e2d\u7684\u7528\u6236ID\uff1a”,<\/p>\n\n\n\n

        placeholderUserId: “\u8acb\u8f38\u5165”,<\/p>\n\n\n\n

        titleUserId: “\u8f38\u5165\u7528\u6236ID”,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

};<\/p>\n\n\n\n

\u7136\u540e\u518d\u9700\u8981\u56fd\u9645\u5316\u7684vue\u6587\u4ef6\u4e2d\uff1a<\/strong><\/p>\n\n\n\n

\u6ce8\u610f\uff1ai18n\u4f7f\u7528\u65f6\u7528t(x)\u51fd\u6570\uff08js\u91cc\u9762\u7528\uff09\u6216\u8005$t(x)\u51fd\u6570\uff08html\u91cc\u9762\u7528\uff09\u6765\u7ffb\u8bd1\u5bf9\u5e94\u7684\u8bed\u8a00\u3002<\/p>\n\n\n\n

    import {languageStore} from ‘@\/stores\/LanguageStore’<\/p>\n\n\n\n

    let langStore = languageStore()<\/p>\n\n\n\n

    import { useI18n } from ‘vue-i18n’<\/p>\n\n\n\n

    const { t, locale } = useI18n()<\/p>\n\n\n\n

    const placeholderUserId = ref(t(“XianGuoZhi_TW.placeholderUserId”))<\/p>\n\n\n\n

    const titleUserId = ref(t(“XianGuoZhi_TW.titleUserId”))<\/p>\n\n\n\n

…<\/p>\n\n\n\n

<template><\/p>\n\n\n\n

\u00a0 <Header><\/Header> <!– \u7528\u6765\u9009\u62e9\u8bed\u8a00\u7684\u5934\u90e8\u7ec4\u4ef6\uff0c\u89c1\u4e0b\u9762 –><\/p>\n\n\n\n

    <div><\/p>\n\n\n\n

        {{ $t(“XianGuoZhi_TW.selectProducts”) }}<\/p>\n\n\n\n

    <\/div><\/p>\n\n\n\n

    <div><\/p>\n\n\n\n

        <ul style=”list-style-type:none;”><\/p>\n\n\n\n

            <li><\/p>\n\n\n\n

                {{ $t(“XianGuoZhi_TW.userId”) }}<\/p>\n\n\n\n

                <el-input v-model=”userIdInput” style=”width: 240px” :placeholder=”placeholderUserId” size=”large” \/><\/p>\n\n\n\n

            <\/li><\/p>\n\n\n\n

        <\/ul><\/p>\n\n\n\n

    <\/div><\/p>\n\n\n\n

<\/template><\/p>\n\n\n\n

\u7528\u6765\u9009\u62e9\u8bed\u8a00\u7684Header.vue\u7ec4\u4ef6\uff1a<\/strong><\/p>\n\n\n\n

<script lang=”ts” setup name=”Header”><\/p>\n\n\n\n

    import {onMounted, onBeforeMount, ref, getCurrentInstance} from “vue”<\/p>\n\n\n\n

    import { useI18n } from “vue-i18n”;<\/p>\n\n\n\n

    import {languageStore} from ‘@\/stores\/LanguageStore’<\/p>\n\n\n\n

    \/\/i18n\u63d0\u4f9b\u81ea\u5199\u4ee3\u7801\u56fd\u9645\u5316\uff0cel-config-provider\u63d0\u4f9belement plus\u7684\u56fd\u9645\u5316\u3002\u4ee5languageStore\u6700\u4e3a\u5a92\u4ecb\uff0c\u628a\u4e24\u8005\u5173\u8054\u8d77\u6765<\/p>\n\n\n\n

    let store = languageStore()<\/p>\n\n\n\n

    const { locale } = useI18n();<\/p>\n\n\n\n

    const langType = {<\/p>\n\n\n\n

        “zhCn”: “\u7b80\u4f53”,<\/p>\n\n\n\n

        “zhTw”: “\u7e41\u9ad4”,<\/p>\n\n\n\n

        “en”:   “English”,<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    const handleCommand = (value: string) => {<\/p>\n\n\n\n

        locale.value = value;<\/p>\n\n\n\n

        store.languageChange(value);<\/p>\n\n\n\n

    };<\/p>\n\n\n\n

<\/script><\/p>\n\n\n\n

<template><\/p>\n\n\n\n

    <div class=”header”><\/p>\n\n\n\n

      <el-dropdown @command=”handleCommand”><\/p>\n\n\n\n

        <span class=”el-dropdown-link”><\/p>\n\n\n\n

          {{ langType[store.language] }}<\/p>\n\n\n\n

          <el-icon class=”el-icon–right”><\/p>\n\n\n\n

            <arrow-down \/><\/p>\n\n\n\n

          <\/el-icon><\/p>\n\n\n\n

        <\/span><\/p>\n\n\n\n

        <template #dropdown><\/p>\n\n\n\n

          <el-dropdown-menu><\/p>\n\n\n\n

            <el-dropdown-item command=”zhCn”>{{ langType[‘zhCn’] }}<\/el-dropdown-item><\/p>\n\n\n\n

            <el-dropdown-item command=”zhTw”>{{ langType[‘zhTw’] }}<\/el-dropdown-item><\/p>\n\n\n\n

            <el-dropdown-item command=”en”>{{ langType[‘en’] }}<\/el-dropdown-item><\/p>\n\n\n\n

          <\/el-dropdown-menu><\/p>\n\n\n\n

        <\/template><\/p>\n\n\n\n

      <\/el-dropdown><\/p>\n\n\n\n

    <\/div><\/p>\n\n\n\n

<\/template><\/p>\n\n\n\n

<style lang=”less”><\/p>\n\n\n\n

    .header {<\/p>\n\n\n\n

        display: flex;<\/p>\n\n\n\n

        align-items: center;<\/p>\n\n\n\n

        justify-content: space-between;<\/p>\n\n\n\n

        width: 100%;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

<\/style><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

\u5b89\u88c5vue\u7684i18\uff1a npm install vue-i18n@latest –save \u5728mai …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[916,914,898,915,917],"class_list":["post-1174","post","type-post","status-publish","format-standard","hentry","category-13","tag-element-plus","tag-i18","tag-vue","tag-915","tag-917"],"views":813,"_links":{"self":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1174"}],"version-history":[{"count":1,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1174\/revisions"}],"predecessor-version":[{"id":1175,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1174\/revisions\/1175"}],"wp:attachment":[{"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-shu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}