{"id":240,"date":"2026-09-02T09:57:47","date_gmt":"2026-09-02T01:57:47","guid":{"rendered":"https:\/\/yykcj.com\/?p=240"},"modified":"2026-09-02T09:57:47","modified_gmt":"2026-09-02T01:57:47","slug":"%e5%89%8d%e7%ab%af%e5%9b%bd%e9%99%85%e5%8c%96-i18n-%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5%ef%bc%9a%e4%bb%8e%e9%9b%b6%e5%88%b0%e4%b8%80%e6%89%93%e9%80%a0%e5%a4%9a%e8%af%ad%e8%a8%80%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=240","title":{"rendered":"\u524d\u7aef\u56fd\u9645\u5316 (i18n) \u6700\u4f73\u5b9e\u8df5\uff1a\u4ece\u96f6\u5230\u4e00\u6253\u9020\u591a\u8bed\u8a00\u5e94\u7528"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

\u5728\u5f53\u4eca\u5168\u7403\u5316\u7684\u4e92\u8054\u7f51\u73af\u5883\u4e2d\uff0c\u5e94\u7528\u7a0b\u5e8f\u7684\u56fd\u9645\u5316\uff08Internationalization\uff0c\u7b80\u79f0 i18n\uff09\u5df2\u6210\u4e3a\u4e00\u9879\u57fa\u672c\u8981\u6c42\u3002\u65e0\u8bba\u662f\u9762\u5411\u6d77\u5916\u7528\u6237\u7684\u4ea7\u54c1\uff0c\u8fd8\u662f\u56fd\u5185\u7684\u591a\u8bed\u8a00\u9700\u6c42\uff08\u5982\u4e2d\u82f1\u6587\u5207\u6362\uff09\uff0c\u524d\u7aef\u5f00\u53d1\u8005\u90fd\u9700\u8981\u638c\u63e1\u4e00\u5957\u9ad8\u6548\u3001\u53ef\u7ef4\u62a4\u7684\u56fd\u9645\u5316\u65b9\u6848\u3002<\/p>\n

\u7136\u800c\uff0c\u8bb8\u591a\u9879\u76ee\u5728\u521d\u671f\u5ffd\u7565\u4e86\u56fd\u9645\u5316\u8bbe\u8ba1\uff0c\u5bfc\u81f4\u540e\u671f\u91cd\u6784\u6210\u672c\u9ad8\u6602\uff1b\u6216\u8005\u867d\u7136\u5f15\u5165\u4e86 i18n \u5e93\uff0c\u5374\u56e0\u4e3a\u914d\u7f6e\u6df7\u4e71\u3001\u8bed\u8a00\u5305\u7ba1\u7406\u4e0d\u5584\u800c\u96be\u4ee5\u7ef4\u62a4\u3002\u672c\u6587\u5c06\u4ece\u96f6\u5f00\u59cb\uff0c\u5e26\u4f60\u6784\u5efa\u4e00\u5957\u5b8c\u6574\u7684\u524d\u7aef\u56fd\u9645\u5316\u6700\u4f73\u5b9e\u8df5\uff0c\u6db5\u76d6\u6280\u672f\u9009\u578b\u3001\u5de5\u7a0b\u7ed3\u6784\u3001\u52a8\u6001\u5207\u6362\u3001\u81ea\u52a8\u5316\u5de5\u5177\u7b49\u6838\u5fc3\u73af\u8282\uff0c\u5e76\u5206\u4eab\u4e00\u4e9b\u72ec\u7279\u7684\u5b9e\u6218\u7ecf\u9a8c\u3002<\/p>\n

\u4e3a\u4ec0\u4e48\u9700\u8981\u56fd\u9645\u5316\uff1f<\/h2>\n

\u56fd\u9645\u5316\u4e0d\u4ec5\u4ec5\u662f\u7ffb\u8bd1\u6587\u672c\uff0c\u5b83\u8fd8\u6d89\u53ca\u65e5\u671f\u3001\u6570\u5b57\u3001\u8d27\u5e01\u3001\u65f6\u533a\u3001\u6392\u5e8f\u89c4\u5219\u7b49\u6587\u5316\u5dee\u5f02\u3002\u826f\u597d\u7684\u56fd\u9645\u5316\u65b9\u6848\u80fd\u663e\u8457\u63d0\u5347\u7528\u6237\u4f53\u9a8c\uff0c\u6269\u5927\u4ea7\u54c1\u7684\u5e02\u573a\u8986\u76d6\u8303\u56f4\u3002\u5bf9\u4e8e\u5f00\u53d1\u8005\u800c\u8a00\uff0c\u5408\u7406\u7684\u67b6\u6784\u80fd\u51cf\u5c11\u91cd\u590d\u52b3\u52a8\uff0c\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002<\/p>\n

\u6280\u672f\u9009\u578b\uff1aVue I18n vs React Intl<\/h2>\n

\u524d\u7aef\u751f\u6001\u4e2d\uff0c\u6700\u6d41\u884c\u7684 i18n \u5e93\u5206\u522b\u662f Vue \u751f\u6001\u7684 vue-i18n<\/code> \u548c React \u751f\u6001\u7684 react-intl<\/code>\uff08\u6216 react-i18next<\/code>\uff09\u3002\u672c\u6587\u4ee5 Vue 3 + vue-i18n<\/code> \u4e3a\u4f8b\uff0c\u4f46\u6838\u5fc3\u601d\u60f3\u540c\u6837\u9002\u7528\u4e8e React\u3002<\/p>\n

\u5b89\u88c5\u4e0e\u521d\u59cb\u5316<\/h3>\n

\u9996\u5148\uff0c\u521b\u5efa Vue 3 \u9879\u76ee\uff08\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\uff09\uff1a<\/p>\n

\nnpm create vite@latest my-app -- --template vue\ncd my-app\nnpm install vue-i18n@next\n<\/code><\/pre>\n
\u5728 src\/main.js<\/code> \u4e2d\u521d\u59cb\u5316 vue-i18n<\/code>\uff1a<\/p>\n
\nimport { createApp } from 'vue'\nimport { createI18n } from 'vue-i18n'\nimport App from '.\/App.vue'\n\n\/\/ \u5bfc\u5165\u8bed\u8a00\u5305\nimport en from '.\/locales\/en.json'\nimport zh from '.\/locales\/zh.json'\n\nconst i18n = createI18n({\n  legacy: false, \/\/ \u4f7f\u7528 Composition API \u6a21\u5f0f\n  locale: 'zh',  \/\/ \u9ed8\u8ba4\u8bed\u8a00\n  fallbackLocale: 'en', \/\/ \u56de\u9000\u8bed\u8a00\n  messages: {\n    en,\n    zh\n  }\n})\n\nconst app = createApp(App)\napp.use(i18n)\napp.mount('#app')\n<\/code><\/pre>\n
\u8bed\u8a00\u5305\u7684\u7ed3\u6784\u8bbe\u8ba1<\/h2>\n
\u8bed\u8a00\u5305\u662f\u56fd\u9645\u5316\u7684\u6838\u5fc3\u3002\u4e00\u4e2a\u4f18\u79c0\u7684\u8bed\u8a00\u5305\u7ed3\u6784\u5e94\u5f53\u6e05\u6670\u3001\u6613\u4e8e\u7ef4\u62a4\u3002\u5efa\u8bae\u6309\u6a21\u5757\u5212\u5206\uff0c\u800c\u4e0d\u662f\u5c06\u6240\u6709\u6587\u672c\u653e\u5728\u4e00\u4e2a\u6241\u5e73\u5bf9\u8c61\u4e2d\u3002<\/p>\n
\u4f8b\u5982\uff0csrc\/locales\/zh.json<\/code>\uff1a<\/p>\n
\n{\n  "common": {\n    "confirm": "\u786e\u8ba4",\n    "cancel": "\u53d6\u6d88",\n    "loading": "\u52a0\u8f7d\u4e2d..."\n  },\n  "login": {\n    "title": "\u767b\u5f55",\n    "username": "\u7528\u6237\u540d",\n    "password": "\u5bc6\u7801",\n    "submit": "\u767b\u5f55"\n  },\n  "errors": {\n    "required": "\u8be5\u5b57\u6bb5\u4e3a\u5fc5\u586b\u9879",\n    "invalidEmail": "\u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e"\n  }\n}\n<\/code><\/pre>\n
\u5bf9\u5e94\u7684 en.json<\/code>\uff1a<\/p>\n
\n{\n  "common": {\n    "confirm": "Confirm",\n    "cancel": "Cancel",\n    "loading": "Loading..."\n  },\n  "login": {\n    "title": "Login",\n    "username": "Username",\n    "password": "Password",\n    "submit": "Log in"\n  },\n  "errors": {\n    "required": "This field is required",\n    "invalidEmail": "Invalid email format"\n  }\n}\n<\/code><\/pre>\n
\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h2>\n
\u5728 Vue \u7ec4\u4ef6\u4e2d\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7 $t<\/code> \u51fd\u6570\uff08Options API\uff09\u6216 useI18n<\/code>\uff08Composition API\uff09\u6765\u8bbf\u95ee\u7ffb\u8bd1\u3002<\/p>\n
Options API \u7528\u6cd5<\/h3>\n
\n<template>\n  <div>\n    <h1>{{ $t('login.title') }}<\/h1>\n    <form>\n      <input :placeholder="$t('login.username')" \/>\n      <button>{{ $t('login.submit') }}<\/button>\n    <\/form>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
Composition API \u7528\u6cd5<\/h3>\n
\n<template>\n  <div>\n    <h1>{{ t('login.title') }}<\/h1>\n    <p>{{ t('common.loading') }}<\/p>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { useI18n } from 'vue-i18n'\n\nconst { t } = useI18n()\n<\/script>\n<\/code><\/pre>\n
\u52a8\u6001\u8bed\u8a00\u5207\u6362<\/h2>\n
\u8bed\u8a00\u5207\u6362\u662f\u56fd\u9645\u5316\u7684\u6838\u5fc3\u529f\u80fd\u4e4b\u4e00\u3002\u901a\u5e38\uff0c\u6211\u4eec\u4f1a\u5c06\u7528\u6237\u9009\u62e9\u7684\u8bed\u8a00\u5b58\u50a8\u5728\u672c\u5730\uff08\u5982 localStorage<\/code>\uff09\uff0c\u5e76\u5728\u5e94\u7528\u542f\u52a8\u65f6\u8bfb\u53d6\u3002<\/p>\n
\u5b9e\u73b0\u8bed\u8a00\u5207\u6362<\/h3>\n
\u5728 src\/composables\/useLocale.js<\/code> \u4e2d\u5c01\u88c5\u5207\u6362\u903b\u8f91\uff1a<\/p>\n
\nimport { useI18n } from 'vue-i18n'\nimport { ref } from 'vue'\n\nconst supportedLocales = ['zh', 'en']\nconst locale = ref(localStorage.getItem('locale') || 'zh')\n\nexport function useLocale() {\n  const { locale: i18nLocale } = useI18n()\n\n  const setLocale = (newLocale) => {\n    if (!supportedLocales.includes(newLocale)) {\n      console.warn(`Unsupported locale: ${newLocale}`)\n      return\n    }\n    locale.value = newLocale\n    i18nLocale.value = newLocale\n    localStorage.setItem('locale', newLocale)\n    \/\/ \u53ef\u9009\uff1a\u66f4\u65b0 html lang \u5c5e\u6027\n    document.querySelector('html').setAttribute('lang', newLocale)\n  }\n\n  return {\n    locale,\n    setLocale\n  }\n}\n<\/code><\/pre>\n
\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n
\n<template>\n  <select :value="locale" @change="onChange">\n    <option value="zh">\u4e2d\u6587<\/option>\n    <option value="en">English<\/option>\n  <\/select>\n<\/template>\n\n<script setup>\nimport { useLocale } from '..\/composables\/useLocale'\n\nconst { locale, setLocale } = useLocale()\n\nconst onChange = (event) => {\n  setLocale(event.target.value)\n}\n<\/script>\n<\/code><\/pre>\n
\u521d\u59cb\u5316\u65f6\u8bfb\u53d6\u672c\u5730\u5b58\u50a8<\/h3>\n
\u5728 main.js<\/code> \u4e2d\uff0c\u521d\u59cb\u5316 vue-i18n<\/code> \u65f6\u4ece localStorage<\/code> \u8bfb\u53d6\u8bed\u8a00\uff1a<\/p>\n
\nconst savedLocale = localStorage.getItem('locale') || 'zh'\n\nconst i18n = createI18n({\n  legacy: false,\n  locale: savedLocale,\n  fallbackLocale: 'en',\n  messages: { en, zh }\n})\n<\/code><\/pre>\n
\u5904\u7406\u65e5\u671f\u3001\u6570\u5b57\u548c\u8d27\u5e01<\/h2>\n
\u56fd\u9645\u5316\u4e0d\u4ec5\u662f\u6587\u672c\u7ffb\u8bd1\uff0c\u8fd8\u5305\u62ec\u65e5\u671f\u3001\u6570\u5b57\u548c\u8d27\u5e01\u7684\u672c\u5730\u5316\u3002vue-i18n<\/code> \u63d0\u4f9b\u4e86 d<\/code>\uff08datetime\uff09\u548c n<\/code>\uff08number\uff09\u51fd\u6570\u3002<\/p>\n
\u65e5\u671f\u683c\u5f0f\u5316<\/h3>\n
\u5728\u8bed\u8a00\u5305\u4e2d\u5b9a\u4e49\u683c\u5f0f\uff1a<\/p>\n
\n{\n  "datetime": {\n    "short": {\n      "year": "numeric",\n      "month": "short",\n      "day": "numeric"\n    }\n  }\n}\n<\/code><\/pre>\n
\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n
\n<template>\n  <p>{{ d(new Date(), 'short') }}<\/p>\n<\/template>\n\n<script setup>\nimport { useI18n } from 'vue-i18n'\n\nconst { d } = useI18n()\n<\/script>\n<\/code><\/pre>\n
\u5bf9\u4e8e\u4e2d\u6587\u73af\u5883\uff0c\u4f1a\u8f93\u51fa\u7c7b\u4f3c\u201c2023\u5e7411\u670820\u65e5\u201d\uff0c\u82f1\u6587\u73af\u5883\u5219\u8f93\u51fa\u201cNov 20, 2023\u201d\u3002<\/p>\n
\u6570\u5b57\u548c\u8d27\u5e01<\/h3>\n
\n<template>\n  <p>{{ n(12345.67, 'currency') }}<\/p>\n<\/template>\n<\/code><\/pre>\n
\u5728\u8bed\u8a00\u5305\u4e2d\u5b9a\u4e49 currency<\/code> \u683c\u5f0f\uff1a<\/p>\n
\n{\n  "currency": {\n    "style": "currency",\n    "currency": "CNY",\n    "currencyDisplay": "symbol"\n  }\n}\n<\/code><\/pre>\n
\u8fd9\u6837\uff0c\u4e2d\u6587\u73af\u5883\u4e0b\u663e\u793a\u201c\u00a512,345.67\u201d\uff0c\u82f1\u6587\u73af\u5883\u4e0b\u4f60\u53ef\u80fd\u9700\u8981\u5b9a\u4e49\u4e0d\u540c\u7684\u8d27\u5e01\u683c\u5f0f\u3002<\/p>\n
\u8bed\u8a00\u5305\u7ba1\u7406\u7684\u81ea\u52a8\u5316<\/h2>\n
\u968f\u7740\u9879\u76ee\u89c4\u6a21\u589e\u5927\uff0c\u624b\u52a8\u7ef4\u62a4\u8bed\u8a00\u5305\u5bb9\u6613\u51fa\u9519\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5de5\u5177\u81ea\u52a8\u63d0\u53d6\u4ee3\u7801\u4e2d\u7684 $t<\/code> \u952e\uff0c\u5e76\u751f\u6210\u7f3a\u5931\u7684\u7ffb\u8bd1\u3002<\/p>\n
\u4f7f\u7528 vue-i18n-extract<\/code> \u5de5\u5177<\/h3>\n
\u5b89\u88c5\uff1a<\/p>\n
\nnpm install -D vue-i18n-extract\n<\/code><\/pre>\n
\u5728 package.json<\/code> \u4e2d\u914d\u7f6e\u811a\u672c\uff1a<\/p>\n
\n{\n  "scripts": {\n    "i18n:extract": "vue-i18n-extract --vueFiles '.\/src\/**\/*.vue' --languageFiles '.\/src\/locales\/*.json'"\n  }\n}\n<\/code><\/pre>\n
\u8fd0\u884c\u540e\uff0c\u5b83\u4f1a\u751f\u6210\u4e00\u4e2a\u62a5\u544a\uff0c\u5217\u51fa\u7f3a\u5931\u7684\u952e\u548c\u672a\u4f7f\u7528\u7684\u952e\u3002\u4f60\u53ef\u4ee5\u5c06\u5176\u96c6\u6210\u5230 CI \u4e2d\uff0c\u786e\u4fdd\u8bed\u8a00\u5305\u5b8c\u6574\u6027\u3002<\/p>\n
\u5e38\u89c1\u5751\u4e0e\u89e3\u51b3\u65b9\u6848<\/h2>\n
1. \u952e\u540d\u51b2\u7a81<\/h3>\n
\u907f\u514d\u4f7f\u7528\u8fc7\u4e8e\u901a\u7528\u7684\u952e\u540d\uff0c\u5982 title<\/code>\u3001name<\/code>\u3002\u5efa\u8bae\u6309\u6a21\u5757\u524d\u7f00\uff0c\u5982 login.title<\/code>\u3002<\/p>\n
2. \u52a8\u6001\u7ffb\u8bd1\u952e<\/h3>\n
\u5f53\u9700\u8981\u52a8\u6001\u62fc\u63a5\u952e\u65f6\uff0c\u4f7f\u7528 $t<\/code> \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff1a<\/p>\n
\nconst key = `errors.${errorCode}`\n$t(key)\n<\/code><\/pre>\n
3. \u5bcc\u6587\u672c\u4e0e HTML<\/h3>\n
\u5982\u679c\u7ffb\u8bd1\u4e2d\u5305\u542b HTML \u6807\u7b7e\uff0c\u4f7f\u7528 v-html<\/code> \u6216 i18n-t<\/code> \u7ec4\u4ef6\uff0c\u4f46\u8981\u6ce8\u610f XSS \u98ce\u9669\u3002<\/p>\n
4. \u56de\u9000\u8bed\u8a00\u672a\u8bbe\u7f6e<\/h3>\n
\u52a1\u5fc5\u8bbe\u7f6e fallbackLocale<\/code>\uff0c\u907f\u514d\u56e0\u8bed\u8a00\u5305\u7f3a\u5931\u5bfc\u81f4\u754c\u9762\u7a7a\u767d\u3002<\/p>\n
\u603b\u7ed3<\/h2>\n
\u672c\u6587\u4ece\u6280\u672f\u9009\u578b\u3001\u8bed\u8a00\u5305\u8bbe\u8ba1\u3001\u52a8\u6001\u5207\u6362\u3001\u683c\u5f0f\u5316\u5230\u81ea\u52a8\u5316\u5de5\u5177\uff0c\u7cfb\u7edf\u4ecb\u7ecd\u4e86\u524d\u7aef\u56fd\u9645\u5316\u7684\u6700\u4f73\u5b9e\u8df5\u3002\u5173\u952e\u5728\u4e8e\uff1a<\/p>\n
    \n
  • \u8bed\u8a00\u5305\u6309\u6a21\u5757\u5212\u5206\uff0c\u4fdd\u6301\u6e05\u6670\u7ed3\u6784<\/li>\n
  • \u5408\u7406\u4f7f\u7528 fallbackLocale<\/code> \u548c\u672c\u5730\u5b58\u50a8<\/li>\n
  • \u5229\u7528\u5de5\u5177\u81ea\u52a8\u5316\u7ef4\u62a4\u8bed\u8a00\u5305<\/li>\n<\/ul>\n
    \u4e0b\u4e00\u6b65\uff0c\u4f60\u53ef\u4ee5\u8003\u8651\u96c6\u6210\u7b2c\u4e09\u65b9\u7ffb\u8bd1\u670d\u52a1\uff08\u5982 Crowdin\uff09\u6216\u5b9e\u73b0\u57fa\u4e8e\u7528\u6237\u5730\u533a\u7684\u81ea\u52a8\u8bed\u8a00\u68c0\u6d4b\u3002\u56fd\u9645\u5316\u662f\u4e00\u4e2a\u6301\u7eed\u4f18\u5316\u7684\u8fc7\u7a0b\uff0c\u5e0c\u671b\u672c\u6587\u80fd\u4e3a\u4f60\u6253\u4e0b\u575a\u5b9e\u7684\u57fa\u7840\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u56fd\u9645\u5316\u662f\u524d\u7aef\u5f00\u53d1\u7684\u5e38\u89c1\u9700\u6c42\uff0c\u4f46\u5b9e\u73b0\u65b9\u5f0f\u5343\u5dee\u4e07\u522b\u3002\u672c\u6587\u4ece\u57fa\u7840\u6982\u5ff5\u5230\u5de5\u7a0b\u5316\u5b9e\u8df5\uff0c\u624b\u628a\u624b\u6559\u4f60\u6784\u5efa\u4e00\u5957\u53ef\u7ef4\u62a4\u3001\u53ef\u6269\u5c55\u7684\u591a\u8bed\u8a00\u65b9\u6848\uff0c\u6db5\u76d6 Vue\/React \u6846\u67b6\u3001\u52a8\u6001\u8bed\u8a00\u5207\u6362\u3001\u8bed\u8a00\u5305\u7ba1\u7406\u53ca\u81ea\u52a8\u5316\u5de5\u5177\uff0c\u52a9\u4f60\u907f\u5f00\u5e38\u89c1\u5751\u70b9\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[77,28,16,78,45],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-3","tag-i18n","tag-vue","tag-16","tag-78","tag-45"],"_links":{"self":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":0,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}