1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[2351],{9938:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>x,frontMatter:()=>r,metadata:()=>l,toc:()=>a});const l=JSON.parse('{"id":"notes/Web_Dev/Vue/Nuxt/structure","title":"[Nuxt] \u5c08\u6848\u7d50\u69cb","description":"Nuxt \u74b0\u5883\u57fa\u672c\u4ecb\u7d39","source":"@site/docs/notes/Web_Dev/Vue/Nuxt/02-structure.mdx","sourceDirName":"notes/Web_Dev/Vue/Nuxt","slug":"/notes/Web_Dev/Vue/Nuxt/structure","permalink":"/docs/notes/Web_Dev/Vue/Nuxt/structure","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"vue3","permalink":"/docs/tags/vue-3"},{"inline":true,"label":"nuxt","permalink":"/docs/tags/nuxt"}],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":2,"frontMatter":{"title":"[Nuxt] \u5c08\u6848\u7d50\u69cb","sidebar_label":"[Nuxt] \u5c08\u6848\u7d50\u69cb","tags":["vue3","nuxt"],"keywords":["vue3","nuxt"]},"sidebar":"notes","previous":{"title":"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316","permalink":"/docs/notes/Web_Dev/Vue/Nuxt/init"},"next":{"title":"[Nuxt] \u6578\u64da\u7372\u53d6","permalink":"/docs/notes/Web_Dev/Vue/Nuxt/data_fetch"}}');var t=s(74848),i=s(28453);const r={title:"[Nuxt] \u5c08\u6848\u7d50\u69cb",sidebar_label:"[Nuxt] \u5c08\u6848\u7d50\u69cb",tags:["vue3","nuxt"],keywords:["vue3","nuxt"]},c=void 0,d={},a=[{value:"Nuxt \u74b0\u5883\u57fa\u672c\u4ecb\u7d39",id:"nuxt-\u74b0\u5883\u57fa\u672c\u4ecb\u7d39",level:2},{value:"nuxt.config.ts",id:"nuxtconfigts",level:3},{value:"Nuxt \u7684\u81ea\u52d5\u8def\u7531",id:"nuxt-\u7684\u81ea\u52d5\u8def\u7531",level:2},{value:"\u52d5\u614b\u8def\u7531",id:"\u52d5\u614b\u8def\u7531",level:3},{value:"\u5de2\u72c0\u8def\u7531",id:"\u5de2\u72c0\u8def\u7531",level:3},{value:"\u8def\u7531\u5339\u914d",id:"\u8def\u7531\u5339\u914d",level:3},{value:"layouts",id:"layouts",level:2},{value:"\u8a2d\u5b9a\u7db2\u7ad9\u6a19\u982d",id:"\u8a2d\u5b9a\u7db2\u7ad9\u6a19\u982d",level:2},{value:"\u8f49\u5834\u6548\u679c",id:"\u8f49\u5834\u6548\u679c",level:2},{value:"\u975c\u614b\u7db2\u9801\u90e8\u7f72 (GitHub Pages)",id:"\u975c\u614b\u7db2\u9801\u90e8\u7f72-github-pages",level:2},{value:"Vercel \u90e8\u7f72 (recommended)",id:"vercel-\u90e8\u7f72-recommended",level:2},{value:"\u5efa\u7acb Vercel \u5e33\u865f",id:"\u5efa\u7acb-vercel-\u5e33\u865f",level:3},{value:"\u5efa\u7acb\u8207\u9023\u63a5\u8cc7\u6599\u5eab",id:"\u5efa\u7acb\u8207\u9023\u63a5\u8cc7\u6599\u5eab",level:3},{value:"\u5efa\u7acb\u7a2e\u5b50\u8cc7\u6599",id:"\u5efa\u7acb\u7a2e\u5b50\u8cc7\u6599",level:3},{value:"Reference",id:"reference",level:2}];function o(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"nuxt-\u74b0\u5883\u57fa\u672c\u4ecb\u7d39",children:"Nuxt \u74b0\u5883\u57fa\u672c\u4ecb\u7d39"}),"\n",(0,t.jsxs)(n.p,{children:["\u5728\u521d\u59cb Nuxt \u5c08\u6848\u4e0b\u6703\u767c\u73fe\u74b0\u5883\u597d\u50cf\u7570\u5e38\u7684\u7a7a\uff0c\u6bd4\u4e4b\u524d\u7528 vite \u5efa\u7acb\u5c08\u6848\u5c11\u4e86\u4e00\u4e9b\u8cc7\u6599\u593e\uff0c\u6bd4\u5982\u8aaa components \u4e4b\u985e\u7684\u3002\u9019\u4e0d\u4ee3\u8868 Nuxt \u6c92\u6709\uff0c\u4f46\u5b83\u9078\u64c7\u4e26\u4e0d\u5e6b\u4f60\u9810\u8a2d\u5efa\u7acb\uff0c\u800c\u662f\u8b93\u6211\u5011\u81ea\u5df1\u6309\u7167\u9700\u6c42\u65b0\u589e\u3002",(0,t.jsx)(n.br,{}),"\n","\u53ef\u4ee5\u65b0\u589e\u7d66 Nuxt \u505a\u5224\u8b80\u7684\u8cc7\u6599\u593e\u53ef\u4ee5\u53c3\u7167",(0,t.jsx)(n.a,{href:"https://nuxt.com/docs/guide/directory-structure/app",children:"\u5b98\u7db2"}),"\u3002"]}),"\n",(0,t.jsx)(n.p,{children:"\u4ee5\u4e0b\u70ba\u5e7e\u500b\u5c08\u6848\u5f88\u5e38\u7528\u5230\u7684\u8cc7\u6599\u593e\uff1a"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"components"}),"\uff1a\u5b58\u653e\u5143\u4ef6\u7684\u5730\u65b9\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"pages"}),"\uff1a\u5b58\u653e\u9801\u9762\u7684\u5730\u65b9\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"utils"}),"\uff1a\u628a\u5e38\u7528\u7684\u529f\u80fd\u5beb\u6210\u4e00\u500b\u51fd\u6578\u5171\u7528\u5132\u5b58\u7684\u5730\u65b9\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"assets"}),"\uff1a\u7528\u4f86\u5b58\u653e\u9700\u8981\u6253\u5305\u7684\u975c\u614b\u6a94\u6848\uff0c\u8af8\u5982\u5404\u5f0f\u5404\u6a23 CSS\u3001SCSS \u6216\u5b57\u578b\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"public"}),"\uff1a\u7528\u4f86\u5b58\u653e\u90a3\u4e9b\u4e0d\u9700\u8981\u6253\u5305\u7684\u975c\u614b\u6a94\u6848\uff0c\u6bd4\u5982 favicon\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"middleware"}),"\uff1a\u8def\u7531\u4e2d\u9593\u4ef6\u653e\u7f6e\u8655\uff0c\u6bd4\u5982\u8df3\u8f49\u9801\u9762\u6642\u8981\u5148\u904b\u884c\u7684\u8eab\u5206\u9a57\u8b49\u3002"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"nuxtconfigts",children:"nuxt.config.ts"}),"\n",(0,t.jsxs)(n.p,{children:["\u9019\u662f Nuxt \u7684\u8a2d\u5b9a\u6a94\uff0c\u8af8\u591a\u529f\u80fd\u6216\u5957\u4ef6\u7684\u914d\u7f6e\u90fd\u8981\u5728\u9
1019\u88e1\u9032\u884c\u3002",(0,t.jsx)(n.br,{}),"\n","\u4ee5 pinia \u8209\u4f8b\uff0c\u5728\u9019\u88e1\u5c31\u662f\u8a2d\u5b9a Nuxt \u4f7f\u7528 pinia \u4e26\u5728\u6bcf\u500b\u6a94\u6848\u81ea\u52d5\u5f15\u5165 ",(0,t.jsx)(n.code,{children:"defineStore"}),"\u3001",(0,t.jsx)(n.code,{children:"definePiniaStore"})," \u5169\u500b\u65b9\u6cd5\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:'export default defineNuxtConfig({\n devtools: { enabled: true },\n modules: [\n [\n "@pinia/nuxt",\n {\n autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],\n },\n ],\n ],\n});\n'})}),"\n",(0,t.jsxs)(n.admonition,{type:"tip",children:[(0,t.jsxs)(n.p,{children:["\u5c0d\u65bc\u4e00\u4e9b\u96b1\u79c1\u8a2d\u5b9a\uff0c\u6bd4\u5982\u4e00\u4e9b\u4e0d\u60f3\u8b93\u5916\u4eba\u77e5\u9053\u7684 api \u8def\u5f91\uff0c\u53ef\u4ee5\u4f7f\u7528 ",(0,t.jsx)(n.code,{children:"runtimeConfig"})," \u505a\u9650\u5236\u96b1\u85cf\u3002"]}),(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"export default defineNuxtConfig({\n runtimeConfig: {\n // \u53ea\u5728\u4f3a\u670d\u5668\u53ef\u898b\n apiSecret: '/api/private',\n // \u4f3a\u670d\u5668\u6216\u700f\u89bd\u5668\u7686\u53ef\u898b\n public: {\n apiBase: '/api'\n }\n }\n})\n"})})]}),"\n",(0,t.jsx)(n.h2,{id:"nuxt-\u7684\u81ea\u52d5\u8def\u7531",children:"Nuxt \u7684\u81ea\u52d5\u8def\u7531"}),"\n",(0,t.jsxs)(n.p,{children:["\u51e1\u662f\u653e\u5728 ",(0,t.jsx)(n.code,{children:"pages"})," \u7684\u6a94\u6848\uff0c\u90fd\u6703\u81ea\u52d5\u88ab Nuxt \u505a\u6210\u8def\u7531\uff0c\u9019\u662f\u5f88\u591a\u4eba\u9078\u64c7\u76f4\u63a5\u4f7f\u7528 Nuxt \u958b\u767c\u7684\u539f\u56e0\uff0c\u56e0\u70ba\u53ef\u4ee5\u6e1b\u53bb\u5f88\u591a\u7de8\u8f2f vue router \u7684\u7e41\u7463\u5de5\u4f5c\u3002",(0,t.jsx)(n.br,{}),"\n","\u5728 pages \u4e2d\uff0c\u901a\u5e38\u6703\u6709\u4e00\u500b ",(0,t.jsx)(n.code,{children:"index.vue"}),"\uff0c\u4ed6\u5c0d\u61c9\u7684\u8def\u7531\u5c31\u662f ",(0,t.jsx)(n.code,{children:"/"}),"\u3002\u5176\u5b83\u6a94\u6848\u7684\u8def\u7531\u5c31\u4f9d\u5176\u540d\u5b57\u800c\u547d\u540d\uff0c\u6bd4\u65b9\u8aaa ",(0,t.jsx)(n.code,{children:"about.vue"})," \u7684\u8def\u7531\u6703\u662f ",(0,t.jsx)(n.code,{children:"/about"}),"\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:["\u9019\u88e1\u6ce8\u610f\u4e00\u9ede\uff0c\u4e0d\u662f\u5728 pages \u5efa\u7acb\u4e86\u6a94\u6848 Nuxt \u5c31\u6703\u505a\u6e32\u67d3\uff0c\u5fc5\u9808\u5148\u5728 ",(0,t.jsx)(n.code,{children:"app.vue"})," \u4e2d\u505a\u5f15\u5165\u624d\u80fd\u6b63\u78ba\u6e32\u67d3\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<template>\n <div>\n \x3c!-- highlight-next-line --\x3e\n <NuxtPage />\n </div>\n</template>\n"})}),"\n",(0,t.jsx)(n.h3,{id:"\u52d5\u614b\u8def\u7531",children:"\u52d5\u614b\u8def\u7531"}),"\n",(0,t.jsxs)(n.p,{children:["\u5728 Nuxt \u73a9\u52d5\u614b\u8def\u7531\u53ea\u8981\u628a\u6a94\u540d\u7528 ",(0,t.jsx)(n.code,{children:"[ ]"})," \u5305\u8d77\u4f86\u5373\u53ef\uff0c\u5982 ",(0,t.jsx)(n.code,{children:"[id].vue"}),"\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",metastring:"title='\u5b98\u65b9\u7bc4\u4f8b'",children:"| pages/\n---| about.vue\n---| index.vue\n---| posts/\n-----| [id].vue\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u5728 ",(0,t.jsx)(n.code,{children:"template"})," \u4e2d\u53ea\u8981\u4f7f\u7528 ",(0,t.jsx)(n.code,{children:"$route.params.id"})," \u5373\u53ef\u53d6\u5f97\u52d5\u614b\u8def\u7531\u8cc7\u8a0a\uff0c\u800c\u5728 ",(0,t.jsx)(n.code,{children:"<script setup>"})," \u4e2d\u8981\u5148\u5f15\u7528 ",(0,t.jsx)(n.code,{children:"useRoute"}),"\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",metastring:"title='template'",children:"<template>\n <h1>page: {{ $route.params.id }}</h1>\n</template>\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"title='<script setup'",children:"const route = useRoute()\n\nconsole.log(route.params.id)\n"})}),"\n",(0,t.jsx)(n.h3,{id:"\u5de2\u72c0\u8def\u7531",children:"\u5de2\u72c0\u8def\u7531"}),"\n",(0,t.jsxs)(n.p,{children:["\u7c21\u55ae\u4f86\u8aaa\u5c31\u662f\u7528\u8cc7\u6599\u593e\u4e00\u500b\u5957\u4f4f\u4e00\u500b\uff0c\u4ee5\u5b98\u65b9\u7bc4\u4f8b\u4f86\u770b\uff0c\u4e0b\u5217\u6703\u7522\u51fa ",(0,t.jsx)(n.code,{children:"/parent"})," \u8ddf ",(0,t.jsx)(n.code,{children:"/parent/child"})," \u5169\u500b\u8def\u7531\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"-| pages/\n---| parent/\n------| child.vue\n---| parent.vue\n"})}),"\n",(0,t.jsx)(n.h3,{id:"\u8def\u7531\u5339\u914d",children:"\u8def\u7531\u5339\u914d"}),"\n",(0,t.jsx)(n.p,{children:"\u5148\u770b vue router \u7684\u8def\u7531\u5339\u914d\uff1a"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"{\n path: '/about/:afterAbout',\n component: AboutView\n},\n{\n path: '/about/:afterAbout(\\\\d+)',\n component: NotFound\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u5728 Nuxt \u4e2d\u5247\u7a0d\u7a0d\u9ebb\u7169\u4e00\u9ede\uff0c\u9700\u8981\u4f7f\u7528 ",(0,t.jsx)(n.code,{children:"definePageMeta"}
1)," \u4e2d\u7684 ",(0,t.jsx)(n.code,{children:"validate"})," \u4f86\u505a\u5339\u914d\uff0c\u5047\u8a2d\u6211\u6709\u500b\u7d50\u69cb\u5982\u4e0b\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",metastring:"title='\u8cc7\u6599\u593e\u7d50\u69cb'",children:"-| pages/\n---| book/\n------| [id].vue\n---| book.vue\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u6211\u8981\u7576 ",(0,t.jsx)(n.code,{children:"id"})," \u70ba\u6578\u5b57\u6642\u9032\u5230\u9019\u4e00\u9801 (",(0,t.jsx)(n.code,{children:"/book/id"}),")\uff0c\u4e0d\u7136\u5c31\u9023\u56de ",(0,t.jsx)(n.code,{children:"/book"}),"\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<script setup>\nconst route = useRoute()\n\n\x3c!-- highlight-start --\x3e\ndefinePageMeta({\n validate: async (route) => {\n // \u6aa2\u67e5id\u662f\u5426\u7531\u6578\u5b57\u7d44\u6210\n if(/^\\d+$/.test(route.params.id)){\n return true\n }else{\n return {path: `/books`}\n }\n }\n})\n\x3c!-- highlight-end --\x3e\n<\/script>\n\n<template>\n <h1>{{ route.params.id }}</h1>\n</template>\n"})}),"\n",(0,t.jsx)(n.h2,{id:"layouts",children:"layouts"}),"\n",(0,t.jsxs)(n.p,{children:["\u6703\u7528\u5230 layout \u7684\u60c5\u6cc1\u5c31\u662f\u8907\u6578\u9801\u9762\u6709\u5171\u7528\u7684\u7d44\u4ef6\u6216\u6392\u7248\u6a23\u5f0f\uff0c\u6bd4\u5982\u8aaa\u5c0e\u89bd\u5217\u3002",(0,t.jsx)(n.br,{}),"\n","layouts \u8cc7\u6599\u593e\u4e2d\uff0c\u547d\u540d\u70ba ",(0,t.jsx)(n.code,{children:"default.vue"})," \u7684\u6703\u662f\u9810\u8a2d\u70ba\u5168\u5c40 layout\uff0c\u53ea\u8981\u5728 ",(0,t.jsx)(n.code,{children:"app.vue"})," \u4e2d\u7d66\u4e88 ",(0,t.jsx)(n.code,{children:"<NuxtLayout>"})," \u8a2d\u5b9a\uff0c\u5c31\u5b8c\u6210\u4e86\u4e00\u534a\u7684 layout \u5f15\u7528\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",metastring:"title='app.vue'",children:"<template>\n <NuxtLayout>\n <NuxtPage />\n </NuxtLayout>\n</template>\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u7136\u5f8c\u5fc5\u9808\u5728 layout \u4e2d\uff0c\u5728\u60f3\u8981\u5957\u5165\u5176\u4ed6\u9801\u9762\u6216\u5143\u4ef6\u7684\u5730\u65b9\u52a0\u4e00\u500b ",(0,t.jsx)(n.code,{children:"<slot/>"}),"\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",metastring:"title='default.vue'",children:"<template>\n <div>\n <slot />\n </div>\n</template>\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u800c\u5982\u679c\u4eca\u5929\u6709\u67d0\u7279\u5b9a\u9801\u9762\u60f3\u5f15\u7528\u4e00\u500b\u7279\u5b9a\u7684 layout\uff0c\u6bd4\u5982\u8aaa\u767b\u5165\u3001\u8a3b\u518a\u9801\u9762\u60f3\u5957\u7528\u540c\u4e00\u500b layout (\u6bd4\u5982 ",(0,t.jsx)(n.code,{children:"sign.vue"}),") \u800c\u4e0d\u662f ",(0,t.jsx)(n.code,{children:"default.vue"}),"\uff0c\u6211\u5011\u53ef\u4ee5\u5728\u8a72\u9801\u9762 ",(0,t.jsx)(n.code,{children:"<script setup>"})," \u4e2d\u9032\u884c\u9801\u9762\u8a2d\u5b9a\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<script setup lang=\"ts\">\ndefinePageMeta({\n layout: 'sign'\n})\n<\/script>\n"})}),"\n",(0,t.jsx)(n.h2,{id:"\u8a2d\u5b9a\u7db2\u7ad9\u6a19\u982d",children:"\u8a2d\u5b9a\u7db2\u7ad9\u6a19\u982d"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\u5148\u5230 ",(0,t.jsx)(n.code,{children:"nuxt.config.ts"})," \u4e2d\u8a2d\u5b9a\u4e0b\u5217\u5167\u5bb9\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"export default defineNuxtConfig({\n app: {\n head: {\n charset: 'utf-8',\n viewport: 'width=device-width, initial-scale=1',\n }\n }\n})\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"app.vue"}),"\uff0c\u6dfb\u52a0\u4e0b\u9762\u9019\u9019\u4e00\u6bb5\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<script setup lang=\"ts\">\nuseHead({\n title: '\u9019\u88e1\u662ftitle',\n meta: [\n { name: 'description', content: '\u9019\u662f\u6e2c\u8a66\u7528\u7db2\u7ad9' }\n ],\n bodyAttrs: {\n class: 'test'\n },\n script: [ { innerHTML: 'console.log(`Hello world`)' } ]\n})\n<\/script>\n"})}),"\n",(0,t.jsx)(n.h2,{id:"\u8f49\u5834\u6548\u679c",children:"\u8f49\u5834\u6548\u679c"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\u5148\u5230 ",(0,t.jsx)(n.code,{children:"nuxt.config.ts"})," \u4e2d\u8a2d\u5b9a\u4e0b\u5217\u5167\u5bb9\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"export default defineNuxtConfig({\n app: {\n pageTransition: { name: 'page', mode: 'out-in' }\n }\n})\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"app.vue"}
1),"\uff0c\u6dfb\u52a0\u4e0b\u9762\u9019\u9019\u4e00\u6bb5\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<style>\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n</style>\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u4e5f\u53ef\u4ee5\u50c5\u91dd\u5c0d\u4e00\u500b\u9801\u9762\u505a\u8f49\u5834\uff0c\u6bd4\u5982\u9032\u5230 about \u9801\u9762\u624d\u6703\u6709\u8f49\u5834\u6548\u679c\uff0c\u9019\u6642\u5fc5\u9808\u5148\u5728 ",(0,t.jsx)(n.code,{children:"/page/about.vue"})," \u4e2d\u505a\u8a2d\u5b9a\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<script setup lang=\"ts\">\ndefinePageMeta({\n pageTransition: {\n name: 'rotate'\n }\n})\n<\/script>\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u7136\u5f8c\u56de ",(0,t.jsx)(n.code,{children:"app.vue"})," \u6dfb\u52a0\u6a23\u5f0f\uff0c\u8a18\u5f97\u4f7f\u7528\u525b\u525b\u5b9a\u7fa9\u7684 ",(0,t.jsx)(n.code,{children:"name"}),"\uff1a"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-xml",children:"<style>\n.rotate-enter-active,\n.rotate-leave-active {\n transition: all 0.4s;\n}\n.rotate-enter-from,\n.rotate-leave-to {\n opacity: 0;\n transform: rotate3d(1, 1, 1, 15deg);\n}\n</style>\n"})}),"\n",(0,t.jsx)(n.h2,{id:"\u975c\u614b\u7db2\u9801\u90e8\u7f72-github-pages",children:"\u975c\u614b\u7db2\u9801\u90e8\u7f72 (GitHub Pages)"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\u6309\u88dd ",(0,t.jsx)(n.code,{children:"gh-pages"}),"\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"npm i -D gh-pages\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsxs)(n.li,{children:["\u4fee\u6539 ",(0,t.jsx)(n.code,{children:"nuxt.config.ts"}),"\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"export default defineNuxtConfig({\n app: {\n baseURL: process.env.NODE_ENV === 'production' ? '/your-github-repo/' : '/',\n buildAssetsDir: '/static/'\n }\n})\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsxs)(n.li,{children:["\u5728\u6839\u76ee\u9304\u7684 ",(0,t.jsx)(n.code,{children:"public"})," \u65b0\u589e ",(0,t.jsx)(n.code,{children:".nojekyll"})," \u6a94\u6848\u3002"]}),"\n",(0,t.jsxs)(n.li,{children:["\u5728 ",(0,t.jsx)(n.code,{children:"package.json"})," \u4e2d\u65b0\u589e\u90e8\u7f72\u6307\u4ee4\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'"deploy": "gh-pages --dotfiles -d .output/public"\n'})}),"\n",(0,t.jsxs)(n.ol,{start:"5",children:["\n",(0,t.jsx)(n.li,{children:"\u90e8\u7f72\uff1a"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"npm run generate\nnpm run deploy\n"})}),"\n",(0,t.jsx)(n.h2,{id:"vercel-\u90e8\u7f72-recommended",children:"Vercel \u90e8\u7f72 (recommended)"}),"\n",(0,t.jsx)(n.h3,{id:"\u5efa\u7acb-vercel-\u5e33\u865f",children:"\u5efa\u7acb Vercel \u5e33\u865f"}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsx)(n.p,{children:"\u9019\u88e1\u9ed8\u8a8d\u5df2\u7d93\u6709 GitHub \u5e33\u865f\u4e26\u628a\u4e4b\u524d\u7684\u7df4\u7fd2\u4e0a\u50b3\u5230 GitHub repo \u4e0a\u4e86\u3002"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://vercel.com/signup",children:"Vercel"})," \u9078\u64c7 ",(0,t.jsx)(n.code,{children:"hobby"})," \u514d\u8cbb\u65b9\u6848\uff0c\u4f7f\u7528 GitHub \u767b\u5165\u5373\u53ef\u3002",(0,t.jsx)(n.br,{}),"\n","\u8fa6\u5b8c Vercel \u5e33\u865f\u5f8c\u53ef\u4ee5\u76f4\u63a5\u9023\u901a GitHub repo\uff0cimport \u5c08\u6848\u5f8c\u53ef\u4ee5\u76f4\u63a5\u4e00\u9375\u90e8\u7f72\u3002"]}),"\n",(0,t.jsx)(n.h3,{id:"\u5efa\u7acb\u8207\u9023\u63a5\u8cc7\u6599\u5eab",children:"\u5efa\u7acb\u8207\u9023\u63a5\u8cc7\u6599\u5eab"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["\u90e8\u7f72\u5b8c\u6210\u5f8c\uff0c\u9ede\u9078 ",(0,t.jsx)(n.code,{children:"Continue to Dashboard"}),"\uff0c\u9078\u64c7 ",(0,t.jsx)(n.code,{children:"Storage"}),"\uff0c\u63a5\u8457\u524d\u5f80\u4e0b\u5217\u8def\u5f91 ",(0,t.jsx)(n.code,{children:"Postgres \u2192 Create"}),"\u3002\u7576\u5275\u5efa\u5b8c\u6210\u5f8c\uff0c\u9ede\u64ca ",(0,t.jsx)(n.code,{children:"Connect"})," \u9023\u7d50\u8cc7\u6599\u5eab\u3002"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["\u63a5\u8457\u9ede\u64ca\u524d\u5f80 ",(0,t.jsx)(n.code,{children:".env.local"}),"\uff0c\u9ede\u64ca ",(0,t.jsx)(n.code,{children:"Show secret"})," \u8ddf ",(0,t.jsx)(n.code,{children:"Copy Snippet"}),"\u3002"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["\u56de\u5230\u672c\u5730\u5c08\u6848\u4e2d\uff0c\u5728 ",(0,t.jsx)(n.code,{children:".env"})," \u8cbc\u4e0a\u525b\u525b\u8907\u88fd\u7684\u5167\u5bb9\u3002"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["\u78ba\u4fdd ",(0,t.jsx)(n.code,{children:".env"})," \u6a94\u6848\u6709\u88ab\u52a0\u5165 ",(0,t.jsx)(n.code,{children:".gitignore"})," \u4e2d\u3002"]})}),"\n",(0,t.jsxs)(n.ol,{start:"4",children:["\n",(0,t.jsx)(n.li,{children:"\u5b89\u88dd Vercel Postgres SDK\uff1a"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"pnpm install @vercel/postgres\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"5",children:["\n",(0,t.jsxs)(n.li,{children:["\u5b89\u88dd ",(0,t.jsx)(n.code,{children:"dotenv"})," \u4f86\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-powershell",children:"pnpm install dotenv\n"})}),"\n",(0,t.jsx)(n.h3,{id:"\u5efa\u7acb\u7a2e\u5b50\u8cc7\u6599",children:"\u5efa\u7acb\u7a2e\u5b50\u8cc7\u6599"}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"\u4ee5\u4e0b\u70ba\u500b\u4eba\u5be6\u4f5c\u5c08\u6848\u7bc4\u4f8b\uff0c\u90e8\u5206\u4e0d\u91cd\u8981\u5167\u5bb9\u6703\u7701\u7565\u3002"})}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\u5efa\u7acb ",(0,t.jsx)(n.code,{children:"/scripts/seed.js"}),"\uff0c\u88e1\u9762\u5df2\u7d93\u6709 Next \u5b98\u65b9\u88fd\u4f5c\u597d\u7528\u4f86\u7522\u751f\u7a2e\u5b50\u8cc7\u6599\u7684\u6307\u4ee4\u3002"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const { db } = require('@vercel/postgres')\n\nasync function clearTables(client) {\n try {\n // \u6e05\u7a7a\u6240\u6709\u8cc7\u6599\u8868\n await client.query(`\n DROP TABLE IF EXISTS order_details;\n DROP TABLE IF EXISTS orders;\n DROP TABLE IF EXISTS products;\n DROP TABLE IF EXISTS users;\n `)\n console.log('Tables cleared successfully.')\n } catch (error) {\n console.error('Error clearing tables:', error)\n throw error\n }\n}\n\nasync function createTables(client) {\n try {\n // \u5275\u5efa\u7528\u6236\u8868\n await client.query(`\n C
1REATE TABLE IF NOT EXISTS users (\n id SERIAL PRIMARY KEY,\n name VARCHAR(50) NOT NULL,\n address VARCHAR(255) NOT NULL,\n phone VARCHAR(255) NOT NULL,\n email VARCHAR(255),\n payment VARCHAR(255) NOT NULL\n );\n `)\n\n // Details Skipped\n\n console.log('Tables created successfully.')\n } catch (error) {\n console.error('Error creating tables:', error)\n throw error\n }\n}\n\n// \u5728 main \u51fd\u6578\u4e2d\u9023\u63a5\u6578\u64da\u5eab\uff0c\u4e26\u8abf\u7528 createTables \u51fd\u6578\u5275\u5efa\u8868\nasync function main() {\n const client = await db.connect()\n await clearTables(client)\n await createTables(client)\n await client.end()\n}\n\nmain().catch((err) => {\n console.error('An error occurred while creating tables:', err)\n})\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsxs)(n.li,{children:["\u63a5\u4e0b\u4f86\u524d\u5f80 ",(0,t.jsx)(n.code,{children:"package.json"})," \u589e\u52a0\u4e00\u6bb5\u6307\u4ee4\uff1a"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'"scripts": {\n "build": "next build",\n "dev": "next dev",\n "start": "next start",\n// highlight-next-line\n "seed": "node -r dotenv/config ./scripts/seed.js"\n},\n'})}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsxs)(n.li,{children:["\u57f7\u884c\u6307\u4ee4\u5f8c\u56de\u5230 Vercel\uff0c\u5728\u5074\u6b04\u627e\u5230 ",(0,t.jsx)(n.code,{children:"Data"}),"\uff0c\u5c31\u53ef\u4ee5\u700f\u89bd\u525b\u525b\u5efa\u7acb\u7684\u8868\u683c\u4e86\u3002"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://clairechang.tw/2023/10/03/nuxt3/nuxt-v3-static-site-generation/",children:"Nuxt.js 3.x \u5c07\u975c\u614b\u7db2\u7ad9\u90e8\u7f72\u5230 GitHub Pages"})}),"\n"]})]})}function x(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>r,x:()=>c});var l=s(96540);const t={},i=l.createContext(t);function r(e){const n=l.useContext(i);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),l.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.