[{"data":1,"prerenderedAt":176},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fvite-basic-use":3,"surround:\u002Fposts\u002F2022\u002Fvite-basic-use":165},{"id":4,"title":5,"body":6,"canonical":143,"categories":144,"date":146,"description":147,"draft":148,"extension":149,"image":150,"meta":151,"navigation":152,"path":153,"permalink":143,"readingTime":154,"recommend":143,"references":143,"seo":159,"sitemap":160,"stem":161,"tags":162,"type":143,"updated":146,"__hash__":164},"content\u002Fposts\u002F2022\u002Fvite-basic-use.md","vite使用",{"type":7,"value":8,"toc":131},"minimark",[9,22,25,30,33,44,47,53,60,63,66,74,85,93,96,102,105,111,114,119,125],[10,11,12],"blockquote",{},[13,14,15],"p",{},[16,17,21],"a",{"href":18,"rel":19},"https:\u002F\u002Fvitejs.dev\u002F",[20],"nofollow","vite",[13,23,24],{},"vite 的基本使用",[26,27,29],"h2",{"id":28},"使用-vite-创建项目","使用 vite 创建项目",[13,31,32],{},"使用 pnpm",[34,35,41],"pre",{"className":36,"code":38,"language":39,"meta":40},[37],"language-shell","pnpm create vite\n","shell","",[42,43,38],"code",{"__ignoreMap":40},[13,45,46],{},"使用官方的模版",[34,48,51],{"className":49,"code":50,"language":39,"meta":40},[37],"pnpm create vite vite-program -- --template vue-ts\n",[42,52,50],{"__ignoreMap":40},[13,54,55,56,59],{},"生成好项目后你可以看到项目中有一个 ",[42,57,58],{"code":58},"vite.config.ts","的文件，在这里我们可以进行一系列的配置",[26,61,62],{"id":62},"配置路径别名",[13,64,65],{},"安装类型声明文件",[34,67,72],{"className":68,"code":70,"language":71,"meta":40},[69],"language-bash","pnpm i -D @type\u002Fnode\n","bash",[42,73,70],{"__ignoreMap":40},[13,75,76,77,80,81,84],{},"将 ",[42,78,79],{"code":79},"@"," 指向 ",[42,82,83],{"code":83},"src"," 文件",[34,86,91],{"className":87,"code":89,"language":90,"meta":40},[88],"language-js","import vue from \"@vitejs\u002Fplugin-vue\"\nimport path from \"node:path\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n    plugins: [vue()],\n    resolve: {\n        alias: { \"@\": path.resolve(__dirname, \"src\") },\n    },\n})\n","js",[42,92,89],{"__ignoreMap":40},[26,94,95],{"id":95},"配置代理",[34,97,100],{"className":98,"code":99,"language":90,"meta":40},[88],"export default defineConfig({\n    server: {\n        proxy: {\n            \u002F\u002F string shorthand\n            \"\u002Ffoo\": \"http:\u002F\u002Flocalhost:4567\",\n            \u002F\u002F with options\n            \"\u002Fapi\": {\n                target: \"http:\u002F\u002Fjsonplaceholder.typicode.com\",\n                changeOrigin: true,\n                rewrite: path => path.replace(\u002F^\\\u002Fapi\u002F, \"\"),\n            },\n            \u002F\u002F with RegEx\n            \"^\u002Ffallback\u002F.*\": {\n                target: \"http:\u002F\u002Fjsonplaceholder.typicode.com\",\n                changeOrigin: true,\n                rewrite: path => path.replace(\u002F^\\\u002Ffallback\u002F, \"\"),\n            },\n            \u002F\u002F Using the proxy instance\n            \"\u002Fapi\u002F\": {\n                target: \"http:\u002F\u002Fjsonplaceholder.typicode.com\",\n                changeOrigin: true,\n                configure: (proxy, options) => {\n                    \u002F\u002F proxy will be an instance of 'http-proxy'\n                },\n            },\n            \u002F\u002F Proxying websockets or socket.io\n            \"\u002Fsocket.io\": {\n                target: \"ws:\u002F\u002Flocalhost:3000\",\n                ws: true,\n            },\n        },\n    },\n})\n",[42,101,99],{"__ignoreMap":40},[26,103,104],{"id":104},"配置项目端口及自动启动",[34,106,109],{"className":107,"code":108,"language":90,"meta":40},[88],"export default defineConfig({\n    server: {\n        port: 3030, \u002F\u002F 服务启动端口\n        open: true, \u002F\u002F 服务启动自动打开默认浏览器\n    },\n})\n",[42,110,108],{"__ignoreMap":40},[26,112,113],{"id":113},"配置插件",[115,116,118],"h3",{"id":117},"在-vuejs-中写-jsx","在 Vue.js 中写 Jsx",[34,120,123],{"className":121,"code":122,"language":71,"meta":40},[69],"pnpm i -D @vitejs\u002Fplugin-vue-jsx\n",[42,124,122],{"__ignoreMap":40},[34,126,129],{"className":127,"code":128,"language":90,"meta":40},[88],"import vue from \"@vitejs\u002Fplugin-vue\"\nimport vueJsx from \"@vitejs\u002Fplugin-vue-jsx\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n    plugins: [vue(), vueJsx()],\n})\n",[42,130,128],{"__ignoreMap":40},{"title":40,"searchDepth":132,"depth":132,"links":133},4,[134,136,137,138,139],{"id":28,"depth":135,"text":29},2,{"id":62,"depth":135,"text":62},{"id":95,"depth":135,"text":95},{"id":104,"depth":135,"text":104},{"id":113,"depth":135,"text":113,"children":140},[141],{"id":117,"depth":142,"text":118},3,null,[145],"代码","2022-12-04 15:41:11","vite 简易使用指南",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a229960f0e4-78.webp",{},true,"\u002Fposts\u002F2022\u002Fvite-basic-use",{"text":155,"minutes":156,"time":157,"words":158},"2 min read",1.395,83700,279,{"title":5,"description":147},{"loc":153},"posts\u002F2022\u002Fvite-basic-use",[21,163],"前端工程化","GDM7SkPwBIVv6TTCXRUzcuMCSzXDsdMMggUmYZGioyM",[166,171],{"title":167,"path":168,"stem":169,"date":170,"type":143,"children":-1},"gulp压缩js文件","\u002Fposts\u002F2022\u002Fgulp-uflify-js","posts\u002F2022\u002Fgulp-uflify-js","2022-12-04 15:40:12",{"title":172,"path":173,"stem":174,"date":175,"type":143,"children":-1},"pinia 快速使用","\u002Fposts\u002F2022\u002Fpinia-setup","posts\u002F2022\u002Fpinia-setup","2022-12-04 15:42:19",1789642596724]