{"id":1517,"date":"2023-03-25T14:10:56","date_gmt":"2023-03-25T06:10:56","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1517"},"modified":"2023-04-28T20:19:45","modified_gmt":"2023-04-28T12:19:45","slug":"use-of-vue-js-internationalization-plugin-vue-i18n","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/25\/use-of-vue-js-internationalization-plugin-vue-i18n\/","title":{"rendered":"Vue.js\u56fd\u9645\u5316\u63d2\u4ef6vue-i18n\u7684\u4f7f\u7528"},"content":{"rendered":"

\u5b89\u88c5\u65b9\u6cd5<\/h2>\n

\u4f7f\u7528CDN\u76f4\u63a5\u5f15\u7528<\/h3>\n

<\/p>\n

<script src="https:\/\/unpkg.com\/vue\/dist\/vue.js"><\/script>\n<script src="https:\/\/unpkg.com\/vue-i18n\/dist\/vue-i18n.js"><\/script><\/code><\/pre>\n
NPM<\/h3>\n
$ npm install vue-i18n<\/code><\/pre>\n
Yarn<\/h3>\n
$ yarn add vue-i18n<\/code><\/pre>\n
vue-i18n\u63d2\u4ef6\u4f7f\u7528\u53c2\u8003\u6587\u6863\uff1ahttp:\/\/kazupon.github.io\/vue-i18n\/en\/<\/a><\/p>\n
\u4f7f\u7528\u65b9\u6cd5<\/h2>\n
Vue.js<\/h3>\n
\/* \u56fd\u9645\u5316\u4f7f\u7528\u89c4\u5219 *\/\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello world'\n    }\n  },\n  zh: {\n    message: {\n      hello: '\u4f60\u597d\u4e16\u754c'\n    }\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'zh',\n  messages\n})\n\nexport default {\n  data () {\n    return {\n      hello: this.$t('message.hello')\n    }\n  },\n  i18n\n}<\/code><\/pre>\n
HTML<\/h3>\n
<div id="#app">\n  <p>{{ $t("message.hello") }}<\/p>\n<\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5b89\u88c5\u65b9\u6cd5 \u4f7f\u7528CDN\u76f4\u63a5\u5f15\u7528 <script src="https:\/\/unpkg.com\/v […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1517","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1517"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1517\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}