{"id":19,"date":"2026-05-15T10:31:42","date_gmt":"2026-05-15T02:31:42","guid":{"rendered":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/%e3%80%90%e6%9e%81%e7%ae%80%e3%80%91%e7%94%a8-vue-%e5%86%99%e4%b8%80%e4%b8%aa-chatgpt-%e5%89%8d%e7%ab%af%e5%ba%94%e7%94%a8%ef%bc%8c%e6%94%af%e6%8c%81%e8%bf%9e%e7%bb%ad%e5%af%b9%e8%af%9d%e3%80%81markdo\/"},"modified":"2026-07-03T15:48:11","modified_gmt":"2026-07-03T07:48:11","slug":"vue-chatgpt-frontend","status":"publish","type":"post","link":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/","title":{"rendered":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6"},"content":{"rendered":"<div class=\"eb-aurora-container\" data-status=\"\u6458\u8981\u751f\u6210\u4e2d\" data-finished=\"\u6458\u8981\u5df2\u751f\u6210\">\n\t\t\t\t<div class=\"eb-aurora-inner\">\n\t\t\t\t\t<img class=\"eb-aurora-bg\" src=\"https:\/\/rhzhz.cn\/wp-content\/plugins\/xhtheme-ai-toolbox\/assets\/images\/aurora-bg.svg\" alt=\"\" \/>\n\t\t\t\t\t<div class=\"eb-aurora-status\">\n\t\t\t\t\t\t<div class=\"eb-aurora-tag\">\n\t\t\t\t\t\t\t<div class=\"eb-aurora-pulse\"><\/div>\n\t\t\t\t\t\t\t<span class=\"eb-aurora-status-text\">\u6458\u8981\u751f\u6210\u4e2d<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"eb-aurora-disclaimer\">AI\u751f\u6210\uff0c\u4ec5\u4f9b\u53c2\u8003<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"eb-aurora-content\">\n\t\t\t\t\t\t<span class=\"eb-aurora-text\" data-text=\"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f\"><\/span><span class=\"eb-aurora-cursor\"><\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\r\n<blockquote class=\"wp-block-quote has-text-color is-layout-flow wp-block-quote-is-layout-flow\" style=\"color: #000000;\">\r\n<p class=\"wp-block-paragraph\">\u82e6\u4e8e\u7f51\u4e0a\u5f88\u591a GPT \u5e94\u7528\u6536\u8d39\u504f\u9ad8\uff0c\u6211\u5c31\u7533\u8bf7\u4e86\u81ea\u5df1\u7684\u63a5\u53e3\u3002 \u6700\u8fd1\u521a\u597d\u5728\u5b66 Vue\uff0c\u4e8e\u662f\u987a\u624b\u5199\u4e86\u4e00\u4e2a\u6781\u7b80\u7248\u7684 ChatGPT \u524d\u7aef\u9875\u9762\u3002 \u76ee\u524d\u5df2\u7ecf\u5b9e\u73b0\u4e86 <strong>\u8fde\u7eed\u5bf9\u8bdd\u3001\u6a21\u578b\u5207\u6362\u3001Markdown \u6e32\u67d3\u3001\u672c\u5730\u8bb0\u5f55\u4fdd\u5b58<\/strong> \u7b49\u57fa\u7840\u529f\u80fd\u3002 \u9875\u9762\u6bd4\u8f83\u7b80\u5355\uff0c\u5e03\u5c40\u4e5f\u8fd8\u6709\u4f18\u5316\u7a7a\u95f4\uff0c\u4e0d\u8fc7\u5f88\u9002\u5408\u4f5c\u4e3a\u4e00\u4e2a\u4e8c\u5f00\u57fa\u7840\u7248\u672c\u3002<\/p>\r\n<\/blockquote>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e00\u3001\u6548\u679c\u56fe<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6548\u679c\u5982\u4e0b\uff1a<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/75f7044ad76bedda5ed0d9f714d82629.png\" alt=\"\" \/><\/figure>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e8c\u3001\u9879\u76ee\u5b9e\u73b0\u4e86\u4ec0\u4e48\uff1f<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u4e2a\u5c0f\u9879\u76ee\u76ee\u524d\u4e3b\u8981\u505a\u4e86\u4ee5\u4e0b\u51e0\u4e2a\u529f\u80fd\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u652f\u6301\u57fa\u7840\u804a\u5929\u5bf9\u8bdd<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u8bb0\u5fc6<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301 GPT-3.5 \/ GPT-4 \u6a21\u578b\u5207\u6362<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u7b80\u5355\u7684\u6743\u9650\u9a8c\u8bc1\uff0c\u9632\u6b62\u8bef\u7528 GPT-4<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301 Markdown \u5185\u5bb9\u6e32\u67d3<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u672c\u5730\u5b58\u50a8\u804a\u5929\u8bb0\u5f55<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u201c\u6a21\u62df\u6253\u5b57\u673a\u6548\u679c\u201d<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6574\u4f53\u601d\u8def\u4e0d\u590d\u6742\uff0c\u9002\u5408 Vue \u521d\u5b66\u8005\u7ec3\u624b\uff0c\u4e5f\u65b9\u4fbf\u540e\u7eed\u7ee7\u7eed\u6269\u5c55\u3002<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e09\u3001\u8fde\u7eed\u5bf9\u8bdd\u8bb0\u5fc6\u662f\u600e\u4e48\u5b9e\u73b0\u7684\uff1f<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">1. \u57fa\u672c\u601d\u8def<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fde\u7eed\u5bf9\u8bdd\u7684\u6838\u5fc3\u5176\u5b9e\u5f88\u7b80\u5355\uff1a \u628a\u7528\u6237\u4e4b\u524d\u63d0\u95ee\u8fc7\u7684\u5185\u5bb9\u6682\u65f6\u4fdd\u5b58\u8d77\u6765\uff0c\u6bcf\u6b21\u53d1\u9001\u65b0\u95ee\u9898\u65f6\uff0c\u628a\u6700\u8fd1\u51e0\u6761\u5386\u53f2\u95ee\u9898\u4e00\u8d77\u53d1\u7ed9\u63a5\u53e3\uff0c\u4f5c\u4e3a\u4e0a\u4e0b\u6587\u53c2\u8003\u3002<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u4e3a\u4e86\u8282\u7701 token \u548c\u8c03\u7528\u6210\u672c\uff0c\u6211\u8fd9\u91cc\u6ca1\u6709\u628a\u5b8c\u6574\u5386\u53f2\u5168\u91cf\u53d1\u9001\uff0c\u800c\u662f\u91c7\u7528\u4e86 <strong>\u6570\u7ec4\u5207\u7247<\/strong> \u7684\u65b9\u5f0f\uff0c\u53ea\u4fdd\u7559\u6700\u8fd1\u51e0\u6761\u8bb0\u5f55\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">2. \u5904\u7406\u65b9\u5f0f<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6211\u8fd9\u91cc\u53ea\u63d0\u53d6\u4e86\u6700\u8fd1\u51e0\u6761 <strong>\u7528\u6237\u8f93\u5165<\/strong>\uff0c\u7136\u540e\u62fc\u63a5\u6210\u4e00\u6bb5\u4e0a\u4e0b\u6587\u63d0\u793a\u8bcd\uff0c\u518d\u52a0\u4e0a\u5f53\u524d\u65b0\u95ee\u9898\u4e00\u8d77\u53d1\u9001\u7ed9 GPT\u3002<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u63d0\u793a\u8bed\u5982\u4e0b\uff1a<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote has-text-color is-layout-flow wp-block-quote-is-layout-flow\" style=\"color: #000000;\">\r\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u662f\u6211\u4e4b\u524d\u95ee\u4f60\u7684\u95ee\u9898\uff0c\u53ea\u4f9b\u4f60\u56de\u7b54\u6211\u63a5\u4e0b\u6765\u95ee\u9898\u505a\u53c2\u8003\uff0c\u8bf7\u4f60\u4e0d\u8981\u91cd\u590d\u56de\u7b54\u6211\u4e4b\u524d\u95ee\u8fc7\u7684\u95ee\u9898\uff0c\u53ea\u5bf9\u65b0\u95ee\u9898\u8fdb\u884c\u5904\u7406\u3002\u65b0\u95ee\u9898\u662f\uff1a<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u6837\u505a\u867d\u7136\u6bd4\u8f83\u201c\u6734\u7d20\u201d\uff0c\u4f46\u5b9e\u9645\u6548\u679c\u8fd8\u4e0d\u9519\uff0c\u5df2\u7ecf\u80fd\u6ee1\u8db3\u57fa\u672c\u7684\u8fde\u7eed\u5bf9\u8bdd\u9700\u6c42\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">3. \u5173\u952e\u4ee3\u7801<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\/\/ \u5728\u53d1\u9001\u6d88\u606f\u65f6\uff0c\u5c06\u6700\u8fd1\u7684\u5bf9\u8bdd\u5386\u53f2\u4e00\u5e76\u53d1\u9001\r\nconst maxHistoryLength = 4; \/\/ \u6700\u591a\u4fdd\u7559\u6700\u8fd1 4 \u6761\u8bb0\u5f55\r\nconst trimmedChatHistory = this.chatHistory.slice(-maxHistoryLength);\r\n\r\n\/\/ \u63d0\u53d6\u7528\u6237\u6d88\u606f\r\nconst userMessages = trimmedChatHistory\r\n  .filter(item =&gt; item.sender === 'user')\r\n  .map(item =&gt; item.message);\r\n\r\n\/\/ \u5c06\u7528\u6237\u5386\u53f2\u95ee\u9898\u62fc\u63a5\u4e3a\u5b57\u7b26\u4e32\r\nconst userMessageString = userMessages.join(' ');\r\n\r\n\/\/ \u62fc\u63a5\u4e0a\u4e0b\u6587\u63d0\u793a\u8bcd + \u5f53\u524d\u95ee\u9898\r\nconst fullUserMessage =\r\n  userMessageString +\r\n  ' \u4ee5\u4e0a\u662f\u6211\u4e4b\u524d\u95ee\u4f60\u7684\u95ee\u9898\uff0c\u53ea\u4f9b\u4f60\u56de\u7b54\u6211\u63a5\u4e0b\u6765\u95ee\u9898\u505a\u53c2\u8003\uff0c\u8bf7\u4f60\u4e0d\u8981\u91cd\u590d\u56de\u7b54\u6211\u4e4b\u524d\u95ee\u8fc7\u7684\u95ee\u9898\uff0c\u53ea\u5bf9\u65b0\u95ee\u9898\u8fdb\u884c\u5904\u7406\u3002\u65b0\u95ee\u9898\u662f\uff1a' +\r\n  this.userInput;\r\n\r\n\/\/ \u53d1\u8d77\u8bf7\u6c42\r\nconst response = await this.chatGPTRequest(fullUserMessage);\r\nthis.handleBackendResponse(response);<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">4. \u4e00\u4e2a\u5c0f\u4f18\u5316<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6211\u8fd8\u52a0\u4e86\u4e00\u4e2a\u957f\u5ea6\u9650\u5236\uff1a \u5f53\u4e0a\u4e0b\u6587\u957f\u5ea6\u8d85\u8fc7\u4e00\u5b9a\u8303\u56f4\u65f6\uff0c\u81ea\u52a8\u6e05\u7a7a\u5386\u53f2\u8bb0\u5f55\uff0c\u907f\u514d\u5185\u5bb9\u8d8a\u6765\u8d8a\u957f\u5bfc\u81f4\u8d39\u7528\u589e\u52a0\u6216\u54cd\u5e94\u53d8\u6162\u3002<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>if (userMessageString.length &gt;= 1200) {\r\n  this.chatHistory = [];\r\n  localStorage.removeItem('chatHistory');\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u56db\u3001\u4e3a\u4e86\u9632\u6b62\u8bef\u7528 GPT-4\uff0c\u6211\u52a0\u4e86\u4e00\u4e2a\u7b80\u5355\u6743\u9650\u9a8c\u8bc1<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u56e0\u4e3a GPT-4 \u7684\u6210\u672c\u66f4\u9ad8\uff0c\u6709\u65f6\u5019\u81ea\u5df1\u7528\u7740\u7528\u7740\u4e0d\u5c0f\u5fc3\u5207\u8fc7\u53bb\uff0c\u94b1\u5305\u5c31\u5f00\u59cb\u96be\u53d7\u4e86\u3002 \u6240\u4ee5\u6211\u505a\u4e86\u4e00\u4e2a\u975e\u5e38\u7b80\u5355\u7684\u5bc6\u7801\u9a8c\u8bc1\u903b\u8f91\uff1a\u53ea\u6709\u8f93\u5165\u6b63\u786e\u5bc6\u7801\uff0c\u624d\u80fd\u4f7f\u7528 GPT-4\u3002<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote has-text-color is-layout-flow wp-block-quote-is-layout-flow\" style=\"color: #000000;\">\r\n<p class=\"wp-block-paragraph\">\u5f53\u7136\uff0c\u8fd9\u79cd\u524d\u7aef\u6821\u9a8c\u53ea\u9002\u5408\u6f14\u793a\u6216\u81ea\u7528\u3002 \u5982\u679c\u4f60\u8981\u771f\u6b63\u4e0a\u7ebf\uff0c\u5efa\u8bae\u628a\u6821\u9a8c\u903b\u8f91\u653e\u5230\u540e\u7aef\u53bb\u505a\uff0c\u524d\u7aef\u660e\u6587\u5224\u65ad\u5e76\u4e0d\u5b89\u5168\u3002<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u5173\u952e\u4ee3\u7801<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>submitPassword() {\r\n  if (this.password === 'useit') {\r\n    ElNotification({\r\n      title: 'Success',\r\n      message: '\u6743\u9650\u5df2\u7ecf\u83b7\u5f97\uff01',\r\n      type: 'success',\r\n    })\r\n    this.selectedModel = 'gpt-4'\r\n    this.accessGranted = true\r\n    this.showPasswordCard = false\r\n  } else {\r\n    ElNotification({\r\n      title: 'Warning',\r\n      message: '\u90fd\u662f\u8d2b\u56f0\u60f9\u7684\u7978\uff01',\r\n      type: 'warning',\r\n    })\r\n    this.selectedModel = 'gpt-3.5-turbo'\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5728\u63d0\u4ea4\u95ee\u9898\u524d\uff0c\u4e5f\u4f1a\u518d\u505a\u4e00\u6b21\u5224\u65ad\uff1a<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>if (this.selectedModel === 'gpt-4' &amp;&amp; !this.accessGranted) {\r\n  ElNotification({\r\n    title: 'Warning',\r\n    message: '\u90fd\u662f\u8d2b\u56f0\u60f9\u7684\u7978\uff01',\r\n    type: 'success',\r\n  })\r\n  return;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u6a21\u62df\u6253\u5b57\u6548\u679c<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6700\u5f00\u59cb\u4e3a\u4e86\u63d0\u5347\u4e00\u70b9\u201c\u50cf\u804a\u5929\u673a\u5668\u4eba\u201d\u7684\u611f\u89c9\uff0c\u6211\u81ea\u5df1\u5199\u4e86\u4e2a\u6a21\u62df\u6253\u5b57\u6548\u679c\uff0c\u8ba9\u56de\u590d\u5185\u5bb9\u4e00\u4e2a\u5b57\u4e00\u4e2a\u5b57\u663e\u793a\u51fa\u6765\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u5b9e\u73b0\u65b9\u5f0f<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u62ff\u5230\u5b8c\u6574\u56de\u590d\u540e\uff0c\u5faa\u73af\u622a\u53d6\u5b57\u7b26\u4e32\u9010\u6b65\u6e32\u67d3\uff1a<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const content = response.choices[0].message.content;\r\n\r\nif (content) {\r\n  for (let i = 0; i &lt; content.length; i++) {\r\n    this.messages = [\r\n      ...this.messages.slice(0, -1),\r\n      { content: content.slice(0, i + 1), isUser: false }\r\n    ];\r\n\r\n    await this.$nextTick(() =&gt; {\r\n      const messageContainer = this.$refs.messageContainer;\r\n      messageContainer.scrollTop = messageContainer.scrollHeight;\r\n    });\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u4e0d\u8fc7\u540e\u6765\u6211\u53d1\u73b0\uff0c\u5982\u679c\u76f4\u63a5\u7528 <strong>\u6d41\u5f0f\u8f93\u51fa\uff08stream\uff09<\/strong>\uff0c\u672c\u8eab\u5c31\u80fd\u8fbe\u5230\u7c7b\u4f3c\u7684\u9010\u5b57\u6548\u679c\uff0c\u6240\u4ee5\u8fd9\u4e2a\u529f\u80fd\u4e25\u683c\u6765\u8bf4\u5e76\u4e0d\u662f\u5fc5\u987b\u7684\u3002 \u4f46\u65e2\u7136\u90fd\u5199\u51fa\u6765\u4e86\uff0c\u4e5f\u7b97\u662f\u4e00\u4e2a\u7ec3\u624b\u8fc7\u7a0b\u3002<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u516d\u3001Markdown \u6e32\u67d3<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">GPT \u8fd4\u56de\u7684\u5185\u5bb9\u91cc\uff0c\u7ecf\u5e38\u4f1a\u6709\u4ee3\u7801\u5757\u3001\u5217\u8868\u3001\u6807\u9898\u7b49 Markdown \u683c\u5f0f\u3002 \u5982\u679c\u76f4\u63a5\u7528\u666e\u901a\u6587\u672c\u663e\u793a\uff0c\u9605\u8bfb\u4f53\u9a8c\u4f1a\u5dee\u5f88\u591a\uff0c\u6240\u4ee5\u8fd9\u91cc\u5f15\u5165\u4e86 <code>markdown-it<\/code> \u6765\u505a\u6e32\u67d3\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u5b89\u88c5\u4f9d\u8d56<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npm install markdown-it<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u4f7f\u7528\u65b9\u5f0f<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import MarkdownIt from 'markdown-it';\r\nconst md = new MarkdownIt();\r\n\r\nparseMarkdown(text) {\r\n  return md.render(text);\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6a21\u677f\u4e2d\u901a\u8fc7 <code>v-html<\/code> \u8f93\u51fa\uff1a<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;div v-else-if=\"message.content\" class=\"text-message\" v-html=\"parseMarkdown(message.content)\"&gt;&lt;\/div&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u6837\u8fd4\u56de\u7684 Markdown \u5185\u5bb9\u5c31\u80fd\u6b63\u5e38\u663e\u793a\u4e3a HTML \u7ed3\u6784\uff0c\u50cf\u4ee3\u7801\u5757\u3001\u6807\u9898\u3001\u5217\u8868\u8fd9\u4e9b\u90fd\u66f4\u6e05\u6670\u3002<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e03\u3001\u672c\u5730\u5b58\u50a8\u804a\u5929\u8bb0\u5f55<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u4e3a\u4e86\u8ba9\u9875\u9762\u5237\u65b0\u540e\u8fd8\u80fd\u4fdd\u7559\u804a\u5929\u8bb0\u5f55\uff0c\u6211\u7528\u4e86 <code>localStorage<\/code> \u505a\u672c\u5730\u5b58\u50a8\u3002 \u8fd9\u90e8\u5206\u548c\u201c\u4e0a\u4e0b\u6587\u8bb0\u5fc6\u201d\u529f\u80fd\u7ed3\u5408\u5728\u4e00\u8d77\u540e\uff0c\u4f53\u9a8c\u4f1a\u66f4\u50cf\u4e00\u4e2a\u771f\u6b63\u53ef\u6301\u7eed\u804a\u5929\u7684\u5e94\u7528\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u4fdd\u5b58\u8bb0\u5f55<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>handleBackendResponse(response) {\r\n  this.chatHistory.push({\r\n    sender: 'bot',\r\n    message: response.message\r\n  });\r\n\r\n  this.saveChatHistoryToLocalStorage();\r\n},\r\n\r\nsaveChatHistoryToLocalStorage() {\r\n  localStorage.setItem('chatHistory', JSON.stringify(this.chatHistory));\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u52a0\u8f7d\u8bb0\u5f55<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>loadChatHistoryFromLocalStorage() {\r\n  const storedChatHistory = localStorage.getItem('chatHistory');\r\n  if (storedChatHistory) {\r\n    this.chatHistory = JSON.parse(storedChatHistory);\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u6e05\u7a7a\u8bb0\u5f55<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>clear() {\r\n  this.userInput = '';\r\n  this.chatHistory = [];\r\n  this.messages = [];\r\n  localStorage.removeItem('chatHistory');\r\n\r\n  ElNotification({\r\n    title: 'Success',\r\n    message: '\u8bb0\u5f55\u5df2\u7ecf\u6e05\u7a7a\uff01',\r\n    type: 'success',\r\n  });\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u516b\u3001\u6838\u5fc3\u8bf7\u6c42\u4ee3\u7801<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u91cc\u901a\u8fc7 <code>axios<\/code> \u5411 OpenAI \u63a5\u53e3\u53d1\u8d77\u8bf7\u6c42\uff0c\u6a21\u578b\u53ef\u4ee5\u6839\u636e\u4e0b\u62c9\u6846\u9009\u62e9\u4e0d\u540c\u7248\u672c\u3002<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>chatGPTRequest(msg) {\r\n  return new Promise((resolve, reject) =&gt; {\r\n    axios({\r\n      method: 'post',\r\n      url: '&lt;https:\/\/api.openai.com\/v1\/chat\/completions&gt;',\r\n      data: {\r\n        max_tokens: 1200,\r\n        model: this.selectedModel,\r\n        temperature: 0.8,\r\n        top_p: 1,\r\n        presence_penalty: 1,\r\n        messages: [\r\n          {\r\n            role: 'system',\r\n            content: 'You are ChatGPT'\r\n          },\r\n          {\r\n            role: 'user',\r\n            content: msg\r\n          }\r\n        ],\r\n        stream: false\r\n      },\r\n      headers: {\r\n        'Content-Type': 'application\/json',\r\n        'Authorization': 'Bearer \u4f60\u7684key'\r\n      }\r\n    })\r\n      .then(response =&gt; {\r\n        resolve(response.data);\r\n      })\r\n      .catch(error =&gt; reject(error));\r\n  });\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4e5d\u3001\u9875\u9762\u7ed3\u6784<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u9875\u9762\u90e8\u5206\u6211\u7528\u7684\u662f <code>Element Plus<\/code>\uff0c\u6574\u4f53\u5e03\u5c40\u6bd4\u8f83\u7b80\u5355\uff0c\u4e3b\u8981\u7531\u4ee5\u4e0b\u51e0\u4e2a\u6a21\u5757\u7ec4\u6210\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u9876\u90e8\u6a21\u578b\u9009\u62e9<\/li>\r\n\r\n\r\n\r\n<li>\u5de6\u4fa7\u529f\u80fd\u6309\u94ae<\/li>\r\n\r\n\r\n\r\n<li>\u4e2d\u95f4\u6d88\u606f\u5c55\u793a\u533a<\/li>\r\n\r\n\r\n\r\n<li>\u5e95\u90e8\u8f93\u5165\u6846\u4e0e\u53d1\u9001\u6309\u94ae<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u76ee\u524d\u5e03\u5c40\u8fd8\u6bd4\u8f83\u6734\u7d20\uff0c\u4e3b\u8981\u5148\u628a\u529f\u80fd\u8dd1\u901a\u3002 \u5982\u679c\u540e\u7eed\u8981\u7ee7\u7eed\u4f18\u5316\uff0c\u53ef\u4ee5\u8003\u8651\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u8c03\u6574\u6d88\u606f\u5361\u7247\u5bbd\u5ea6\u4e0e\u7559\u767d<\/li>\r\n\r\n\r\n\r\n<li>\u4f18\u5316\u79fb\u52a8\u7aef\u9002\u914d<\/li>\r\n\r\n\r\n\r\n<li>\u589e\u52a0\u6697\u9ed1\u6a21\u5f0f<\/li>\r\n\r\n\r\n\r\n<li>\u589e\u52a0\u201c\u65b0\u5efa\u4f1a\u8bdd \/ \u5386\u53f2\u4f1a\u8bdd\u5207\u6362\u201d<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u6d41\u5f0f\u8f93\u51fa<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u4ee3\u7801\u9ad8\u4eae<\/li>\r\n\r\n\r\n\r\n<li>\u652f\u6301\u540e\u7aef\u4ee3\u7406\uff0c\u9690\u85cf API Key<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u5341\u3001\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u51e0\u4e2a\u503c\u5f97\u6ce8\u610f\u7684\u95ee\u9898<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">1. \u4e0d\u5efa\u8bae\u628a API Key \u76f4\u63a5\u5199\u5728\u524d\u7aef<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u867d\u7136\u8fd9\u6837\u8c03\u8bd5\u65b9\u4fbf\uff0c\u4f46\u5982\u679c\u4f60\u90e8\u7f72\u5230\u7ebf\u4e0a\uff0c\u524d\u7aef\u4ee3\u7801\u662f\u53ef\u4ee5\u88ab\u770b\u5230\u7684\uff0c\u5bc6\u94a5\u5f88\u5bb9\u6613\u6cc4\u9732\u3002 \u66f4\u5408\u7406\u7684\u505a\u6cd5\u662f\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u524d\u7aef\u8bf7\u6c42\u4f60\u81ea\u5df1\u7684\u540e\u7aef<\/li>\r\n\r\n\r\n\r\n<li>\u540e\u7aef\u518d\u53bb\u8bf7\u6c42 OpenAI \u63a5\u53e3<\/li>\r\n\r\n\r\n\r\n<li>\u7531\u540e\u7aef\u7edf\u4e00\u505a\u9274\u6743\u3001\u9650\u6d41\u3001\u65e5\u5fd7\u548c\u6a21\u578b\u63a7\u5236<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">2. \u8fde\u7eed\u5bf9\u8bdd\u6700\u597d\u4f7f\u7528\u6807\u51c6 messages \u7ed3\u6784<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u6211\u76ee\u524d\u8fd9\u4e2a\u7248\u672c\u662f\u628a\u5386\u53f2\u95ee\u9898\u62fc\u6210\u4e00\u6bb5\u6587\u672c\u53d1\u7ed9 GPT\uff0c\u6bd4\u8f83\u7b80\u5355\u76f4\u63a5\u3002 \u5982\u679c\u60f3\u8981\u66f4\u89c4\u8303\uff0c\u5efa\u8bae\u4f7f\u7528 OpenAI \u5b98\u65b9\u63a8\u8350\u7684 <code>messages<\/code> \u6570\u7ec4\u683c\u5f0f\uff0c\u628a <code>user<\/code> \u548c <code>assistant<\/code> \u7684\u5386\u53f2\u6d88\u606f\u4e00\u8d77\u4f20\u5165\uff0c\u8fd9\u6837\u4e0a\u4e0b\u6587\u8d28\u91cf\u4f1a\u66f4\u597d\u3002<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">3. \u6a21\u62df\u6253\u5b57\u6548\u679c\u4e0d\u5982\u6d41\u5f0f\u8f93\u51fa\u81ea\u7136<\/h3>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u624b\u52a8\u9010\u5b57\u6e32\u67d3\u80fd\u5b9e\u73b0\u89c6\u89c9\u6548\u679c\uff0c\u4f46\u4e25\u683c\u6765\u8bf4\u4e0d\u662f\u771f\u6b63\u7684\u6d41\u5f0f\u54cd\u5e94\u3002 \u5982\u679c\u60f3\u4f53\u9a8c\u66f4\u771f\u5b9e\u7684\u201c\u8fb9\u751f\u6210\u8fb9\u663e\u793a\u201d\uff0c\u5efa\u8bae\u540e\u7eed\u63a5\u5165 <code>stream: true<\/code>\u3002<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u5341\u4e00\u3001\u603b\u7ed3<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u4e2a Vue \u7248 ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u6574\u4f53\u6765\u8bf4\u7b97\u662f\u4e00\u4e2a\u6bd4\u8f83\u8f7b\u91cf\u7684\u5c0f\u7ec3\u624b\u9879\u76ee\u3002 \u867d\u7136\u9875\u9762\u4e0d\u7b97\u7cbe\u81f4\u3001\u5b9e\u73b0\u65b9\u5f0f\u4e5f\u4e0d\u7b97\u7279\u522b\u590d\u6742\uff0c\u4f46\u57fa\u7840\u529f\u80fd\u5df2\u7ecf\u5177\u5907\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u8fde\u7eed\u5bf9\u8bdd<\/li>\r\n\r\n\r\n\r\n<li>Markdown \u6e32\u67d3<\/li>\r\n\r\n\r\n\r\n<li>\u672c\u5730\u8bb0\u5f55\u5b58\u50a8<\/li>\r\n\r\n\r\n\r\n<li>\u6a21\u578b\u9009\u62e9<\/li>\r\n\r\n\r\n\r\n<li>\u7b80\u5355\u6743\u9650\u63a7\u5236<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5bf9\u4e8e\u521a\u63a5\u89e6 Vue \u6216\u8005\u60f3\u81ea\u5df1\u642d\u4e00\u4e2a\u7b80\u5355 AI \u5bf9\u8bdd\u9875\u9762\u7684\u540c\u5b66\u6765\u8bf4\uff0c\u8fd8\u662f\u633a\u9002\u5408\u53c2\u8003\u548c\u4e8c\u5f00\u7684\u3002<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5982\u679c\u540e\u7eed\u6709\u65f6\u95f4\uff0c\u6211\u51c6\u5907\u7ee7\u7eed\u8865\u8fd9\u4e9b\u529f\u80fd\uff1a<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u6d41\u5f0f\u8f93\u51fa<\/li>\r\n\r\n\r\n\r\n<li>\u591a\u8f6e\u4f1a\u8bdd\u7ba1\u7406<\/li>\r\n\r\n\r\n\r\n<li>\u4ee3\u7801\u9ad8\u4eae<\/li>\r\n\r\n\r\n\r\n<li>\u540e\u7aef\u4ee3\u7406\u63a5\u53e3<\/li>\r\n\r\n\r\n\r\n<li>\u66f4\u7f8e\u89c2\u7684\u804a\u5929\u5e03\u5c40<\/li>\r\n\r\n\r\n\r\n<li>\u79fb\u52a8\u7aef\u9002\u914d<\/li>\r\n<\/ul>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u5341\u4e8c\u3001\u5b8c\u6574\u4ee3\u7801<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5b8c\u6574\u4ee3\u7801\u6211\u5c31\u4e0d\u5728\u6b63\u6587\u91cc\u9010\u6bb5\u5c55\u5f00\u5206\u6790\u4e86\uff0c\u6709\u5174\u8da3\u7684\u670b\u53cb\u53ef\u4ee5\u81ea\u5df1\u7ee7\u7eed\u7814\u7a76\u3001\u4f18\u5316\u548c\u4e8c\u5f00\u3002<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5982\u679c\u5927\u5bb6\u6709\u66f4\u597d\u7684\u5b9e\u73b0\u601d\u8def\uff0c\u4e5f\u6b22\u8fce\u8bc4\u8bba\u533a\u4ea4\u6d41\uff0c\u4e00\u8d77\u8fdb\u6b65\u3002<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u5341\u4e09\u3001\u7ed3\u5c3e<\/h2>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u8fd9\u4e2a\u9879\u76ee\u672c\u8d28\u4e0a\u5c31\u662f\u4e00\u4e2a <strong>\u201c\u80fd\u7528\u3001\u7b80\u5355\u3001\u65b9\u4fbf\u7ee7\u7eed\u6539\u201d<\/strong> \u7684\u7248\u672c\u3002 \u5982\u679c\u4f60\u4e5f\u662f\u4e00\u8fb9\u5b66 Vue \u4e00\u8fb9\u6298\u817e AI \u5e94\u7528\uff0c\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u7ed9\u4f60\u4e00\u70b9\u601d\u8def\u3002<\/p>\r\n\r\n\r\n\r\n<p class=\"has-text-color wp-block-paragraph\" style=\"color: #000000;\">\u5982\u679c\u8fd9\u7bc7\u6587\u7ae0\u5bf9\u4f60\u6709\u5e2e\u52a9\uff0c\u6b22\u8fce\u70b9\u8d5e\u3001\u6536\u85cf\u3001\u8bc4\u8bba\u652f\u6301\u4e00\u4e0b\u3002 \u4e5f\u6b22\u8fce\u5927\u4f6c\u4eec\u6307\u70b9\u4f18\u5316\u65b9\u6848\uff0c\u4e92\u76f8\u4ea4\u6d41\u5b66\u4e60\u3002\u8c22\u8c22\uff01<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f<\/p>\n","protected":false},"author":1,"featured_media":48,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_excerptai":2,"_xhaitool_aitasks":true,"_xhaitool_aitasks_status":true,"_aiimage_cueword":"","_aiimage_status":0,"_xhai_excerpt":"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f","footnotes":""},"categories":[15],"tags":[5,4,6,7],"class_list":["post-19","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-15","tag-ai-chat","tag-vue-development","tag-api-calls","tag-local-storage"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2<\/title>\n<meta name=\"description\" content=\"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"RHZ\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-15T02:31:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-03T07:48:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"rhz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"rhz\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/\"},\"author\":{\"name\":\"rhz\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#\\\/schema\\\/person\\\/45208c908a9b3c712c6540359dd9a819\"},\"headline\":\"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6\",\"datePublished\":\"2026-05-15T02:31:42+00:00\",\"dateModified\":\"2026-07-03T07:48:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/\"},\"wordCount\":52,\"commentCount\":43,\"publisher\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#\\\/schema\\\/person\\\/45208c908a9b3c712c6540359dd9a819\"},\"image\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/vue.webp\",\"keywords\":[\"AI\u804a\u5929\",\"Vue\u5f00\u53d1\",\"\u63a5\u53e3\u8c03\u7528\",\"\u672c\u5730\u5b58\u50a8\"],\"articleSection\":[\"\u9879\u76ee\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/\",\"url\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/\",\"name\":\"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/vue.webp\",\"datePublished\":\"2026-05-15T02:31:42+00:00\",\"dateModified\":\"2026-07-03T07:48:11+00:00\",\"description\":\"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/vue.webp\",\"contentUrl\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/vue.webp\",\"width\":1000,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/2026\\\/05\\\/15\\\/vue-chatgpt-frontend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/rhzhz.cn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#website\",\"url\":\"https:\\\/\\\/rhzhz.cn\\\/\",\"name\":\"RHZ\u7684\u535a\u5ba2\",\"description\":\"\u6280\u672f\u535a\u5ba2\u4e0e\u4e2a\u4eba\u5206\u4eab\",\"publisher\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#\\\/schema\\\/person\\\/45208c908a9b3c712c6540359dd9a819\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rhzhz.cn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/#\\\/schema\\\/person\\\/45208c908a9b3c712c6540359dd9a819\",\"name\":\"rhz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1.png\",\"url\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1.png\",\"contentUrl\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1.png\",\"width\":1024,\"height\":1024,\"caption\":\"rhz\"},\"logo\":{\"@id\":\"https:\\\/\\\/rhzhz.cn\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1.png\"},\"description\":\"\u4ed6\u5c71\u4e4b\u77f3 \u53ef\u4ee5\u653b\u7389\",\"sameAs\":[\"https:\\\/\\\/rhzhz.cn\"],\"url\":\"https:\\\/\\\/rhzhz.cn\\\/index.php\\\/user\\\/rhz\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2","description":"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2","og_description":"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f","og_url":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/","og_site_name":"RHZ\u535a\u5ba2","article_published_time":"2026-05-15T02:31:42+00:00","article_modified_time":"2026-07-03T07:48:11+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp","type":"image\/webp"}],"author":"rhz","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"rhz","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#article","isPartOf":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/"},"author":{"name":"rhz","@id":"https:\/\/rhzhz.cn\/#\/schema\/person\/45208c908a9b3c712c6540359dd9a819"},"headline":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6","datePublished":"2026-05-15T02:31:42+00:00","dateModified":"2026-07-03T07:48:11+00:00","mainEntityOfPage":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/"},"wordCount":52,"commentCount":43,"publisher":{"@id":"https:\/\/rhzhz.cn\/#\/schema\/person\/45208c908a9b3c712c6540359dd9a819"},"image":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp","keywords":["AI\u804a\u5929","Vue\u5f00\u53d1","\u63a5\u53e3\u8c03\u7528","\u672c\u5730\u5b58\u50a8"],"articleSection":["\u9879\u76ee"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/","url":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/","name":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6 - RHZ\u535a\u5ba2","isPartOf":{"@id":"https:\/\/rhzhz.cn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#primaryimage"},"image":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp","datePublished":"2026-05-15T02:31:42+00:00","dateModified":"2026-07-03T07:48:11+00:00","description":"\u4f60\u5df2\u7ecf\u7533\u8bf7\u4e86 GPT \u63a5\u53e3\uff0c\u5374\u5361\u5728\u201c\u600e\u4e48\u505a\u6210\u4e00\u4e2a\u80fd\u7528\u7684\u804a\u5929\u9875\u9762\u201d\uff1a\u8fde\u7eed\u5bf9\u8bdd\u600e\u4e48\u7559\u4e0a\u4e0b\u6587\u3001Markdown \u600e\u4e48\u6b63\u5e38\u663e\u793a\u3001\u804a\u5929\u8bb0\u5f55\u600e\u4e48\u672c\u5730\u4fdd\u5b58\uff0c\u751a\u81f3\u4e00\u4e0d\u5c0f\u5fc3\u5207\u5230 GPT-4 \u8fd8\u4f1a\u70e7\u94b1\u3002\u5f88\u591a\u6559\u7a0b\u4e00\u4e0a\u6765\u5c31\u5806\u67b6\u6784\uff0c\u53cd\u800c\u8ba9 Vue \u521d\u5b66\u8005\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u7bc7\u7528\u4e00\u4e2a\u6781\u7b80\u524d\u7aef\u628a\u8fd9\u4e9b\u95ee\u9898\u62c6\u6210\u53ef\u590d\u7528\u7684\u5c0f\u529f\u80fd\uff0c\u4f46\u5176\u4e2d\u6700\u503c\u5f97\u770b\u7684\uff0c\u662f\u90a3\u4e2a\u770b\u4f3c\u6734\u7d20\u5374\u80fd\u7701 token \u7684\u8bb0\u5fc6\u5904\u7406\u65b9\u5f0f\u2014\u2014\u4f60\u73b0\u5728\u7684\u5199\u6cd5\u662f\u4e0d\u662f\u6b63\u5728\u5077\u5077\u6d6a\u8d39\u8c03\u7528\u6210\u672c\uff1f","breadcrumb":{"@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#primaryimage","url":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp","contentUrl":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/vue.webp","width":1000,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/rhzhz.cn\/index.php\/2026\/05\/15\/vue-chatgpt-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/rhzhz.cn\/"},{"@type":"ListItem","position":2,"name":"\u3010\u6781\u7b80\u3011\u7528 Vue \u5199\u4e00\u4e2a ChatGPT \u524d\u7aef\u5e94\u7528\uff0c\u652f\u6301\u8fde\u7eed\u5bf9\u8bdd\u3001Markdown \u6e32\u67d3\u4e0e\u672c\u5730\u8bb0\u5fc6"}]},{"@type":"WebSite","@id":"https:\/\/rhzhz.cn\/#website","url":"https:\/\/rhzhz.cn\/","name":"RHZ\u7684\u535a\u5ba2","description":"\u6280\u672f\u535a\u5ba2\u4e0e\u4e2a\u4eba\u5206\u4eab","publisher":{"@id":"https:\/\/rhzhz.cn\/#\/schema\/person\/45208c908a9b3c712c6540359dd9a819"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rhzhz.cn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/rhzhz.cn\/#\/schema\/person\/45208c908a9b3c712c6540359dd9a819","name":"rhz","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/1.png","url":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/1.png","contentUrl":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/1.png","width":1024,"height":1024,"caption":"rhz"},"logo":{"@id":"https:\/\/rhzhz.cn\/wp-content\/uploads\/2026\/05\/1.png"},"description":"\u4ed6\u5c71\u4e4b\u77f3 \u53ef\u4ee5\u653b\u7389","sameAs":["https:\/\/rhzhz.cn"],"url":"https:\/\/rhzhz.cn\/index.php\/user\/rhz\/"}]}},"_links":{"self":[{"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":4,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/posts\/19\/revisions\/51"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/media\/48"}],"wp:attachment":[{"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rhzhz.cn\/index.php\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}