[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"page-\u002Fvue\u002Fvite":3},{"id":4,"title":5,"body":6,"description":394,"extension":395,"meta":396,"navigation":397,"path":398,"seo":399,"stem":400,"__hash__":401},"content\u002FVue\u002Fvite.md","Vite",{"type":7,"value":8,"toc":384},"minimark",[9,37,51,56,120,124,145,149,154,168,179,183,186,192,199,203,206,212,232,236,242,248,252,255,261,268,272,278,281,284,355,358,378,381],[10,11,12,15,16,19,20,19,23,19,26,29,30,33,34],"p",{},[13,14,5],"strong",{}," 是一个现代化的前端构建工具，主要用于开发和构建 ",[13,17,18],{},"JavaScript","、",[13,21,22],{},"TypeScript",[13,24,25],{},"Vue",[13,27,28],{},"React"," 等前端应用程序。Vite 由 ",[13,31,32],{},"Evan You","（Vue.js 的创始人）开发，它的目标是",[13,35,36],{},"提供一个极快的开发体验，同时确保构建性能也很高效。",[10,38,39,40,43,44,47,48],{},"Vite 采用了 ",[13,41,42],{},"原生 ES 模块（ESM）"," 支持和 ",[13,45,46],{},"热模块替换（HMR）","，使得前端开发的构建速度显著提升。",[13,49,50],{},"Vite 的核心优势在于其极快的启动速度和热更新功能，适合现代开发需求。",[52,53,55],"h3",{"id":54},"vite-的主要特点","Vite 的主要特点",[57,58,59,66,71,92,98,104,114],"ol",{},[60,61,62,65],"li",{},[13,63,64],{},"快速的开发启动","： Vite 利用了原生 ES 模块支持，开发过程中不会进行传统的打包，而是直接在浏览器中通过原生模块导入来进行开发。这样，开发环境的启动速度非常快，通常是传统工具（如 Webpack）的数倍。",[60,67,68,70],{},[13,69,46],{},"： Vite 内置的热模块替换机制比传统的打包工具更高效，能够在开发过程中快速更新模块并反映到浏览器，而无需刷新整个页面。这大大提高了开发效率，特别是在大型项目中。",[60,72,73,76,77,19,79,19,82,19,85,19,88,91],{},[13,74,75],{},"支持现代 JavaScript 特性","： Vite 支持 ",[13,78,22],{},[13,80,81],{},"JSX",[13,83,84],{},"CSS 模块",[13,86,87],{},"PostCSS",[13,89,90],{},"Sass"," 等现代 Web 开发特性，并且开箱即用。",[60,93,94,97],{},[13,95,96],{},"利用原生浏览器支持的 ES 模块","： Vite 在开发模式下直接使用浏览器支持的 ES 模块（ESM），而不是通过捆绑整个应用。这使得开发时可以只加载页面所需的模块，极大提高了启动速度。",[60,99,100,103],{},[13,101,102],{},"按需编译和热更新","： 在开发时，Vite 只会根据浏览器请求的模块进行编译，且采用增量编译的方式，而不是一次性编译整个应用。这样就避免了传统构建工具的“全量重构”问题，极大提升了速度。",[60,105,106,109,110,113],{},[13,107,108],{},"现代构建优化","： 在生产环境中，Vite 会利用 ",[13,111,112],{},"Rollup"," 进行构建，确保最优化的打包效果，产出小巧高效的 bundle 文件。",[60,115,116,119],{},[13,117,118],{},"插件系统","： Vite 拥有丰富的插件生态，支持大量的功能扩展。你可以使用官方和社区插件来扩展 Vite 的能力。",[52,121,123],{"id":122},"vite-与-webpack-比较","Vite 与 Webpack 比较",[125,126,127,133,139],"ul",{},[60,128,129,132],{},[13,130,131],{},"启动速度","：Vite 利用原生 ES 模块和增量编译技术，比 Webpack 更加高效。",[60,134,135,138],{},[13,136,137],{},"构建速度","：Vite 采用 Rollup 进行生产构建，优化了构建速度和输出文件大小。Webpack 也很强大，但在大型项目的构建时可能不如 Vite 高效。",[60,140,141,144],{},[13,142,143],{},"配置复杂度","：Vite 提供了开箱即用的配置，且配置文件更简洁。而 Webpack 通常需要较为复杂的配置，尤其是在一些高级用例下。",[52,146,148],{"id":147},"如何使用-vite","如何使用 Vite",[150,151,153],"h4",{"id":152},"_1-安装-vite","1. 安装 Vite",[10,155,156,157,160,161,164,165,167],{},"Vite 可以通过 ",[13,158,159],{},"npm"," 或 ",[13,162,163],{},"yarn"," 安装。这里是通过 ",[13,166,159],{}," 来创建一个新的 Vite 项目。",[169,170,175],"pre",{"className":171,"code":173,"language":174},[172],"language-text","npm create vite@latest my-project\ncd my-project\nnpm install\n","text",[176,177,173],"code",{"__ignoreMap":178},"",[150,180,182],{"id":181},"_2-启动开发服务器","2. 启动开发服务器",[10,184,185],{},"在项目目录下，运行以下命令启动 Vite 开发服务器：",[169,187,190],{"className":188,"code":189,"language":174},[172],"\nnpm run dev\n",[176,191,189],{"__ignoreMap":178},[10,193,194,195,198],{},"Vite 会启动一个本地开发服务器，通常会在 ",[176,196,197],{},"http:\u002F\u002Flocalhost:5173\u002F"," 监听请求，你可以在浏览器中打开这个地址查看你的应用。",[150,200,202],{"id":201},"_3-项目结构","3. 项目结构",[10,204,205],{},"一个典型的 Vite 项目结构如下：",[169,207,210],{"className":208,"code":209,"language":174},[172],"my-project\u002F\n├── index.html\n├── src\u002F\n│   ├── assets\u002F\n│   ├── main.js\n│   └── App.vue\n├── package.json\n└── vite.config.js\n",[176,211,209],{"__ignoreMap":178},[125,213,214,220,226],{},[60,215,216,219],{},[13,217,218],{},"index.html","：入口 HTML 文件。",[60,221,222,225],{},[13,223,224],{},"src\u002F","：存放源代码的文件夹。",[60,227,228,231],{},[13,229,230],{},"vite.config.js","：Vite 的配置文件，包含项目的定制化配置。",[150,233,235],{"id":234},"_4-配置文件viteconfigjs","4. 配置文件（vite.config.js）",[10,237,238,239,241],{},"Vite 的配置文件是 ",[176,240,230],{},"，它允许你定制开发和构建流程。一个基本的配置文件如下：",[169,243,246],{"className":244,"code":245,"language":174},[172],"import { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [\n    \u002F\u002F 在此添加插件\n  ],\n  server: {\n    port: 3000, \u002F\u002F 修改默认端口\n  },\n});\n",[176,247,245],{"__ignoreMap":178},[150,249,251],{"id":250},"_5-生产构建","5. 生产构建",[10,253,254],{},"当你完成开发并准备将应用部署到生产环境时，运行以下命令进行生产构建：",[169,256,259],{"className":257,"code":258,"language":174},[172],"\nnpm run build\n",[176,260,258],{"__ignoreMap":178},[10,262,263,264,267],{},"Vite 会将应用打包为生产环境优化的文件，通常会生成 ",[176,265,266],{},"dist\u002F"," 目录。这个目录包含了最小化和优化过的 JavaScript、CSS 等文件，可以直接用于部署。",[150,269,271],{"id":270},"_6-部署","6. 部署",[10,273,274,275,277],{},"你可以将 ",[176,276,266],{}," 目录部署到任何静态文件服务器上。例如，你可以使用 GitHub Pages、Netlify、Vercel 或任何其他静态资源托管服务。",[52,279,280],{"id":280},"常用插件",[10,282,283],{},"Vite 的插件系统非常强大，可以用来扩展开发体验。以下是一些常见的插件：",[57,285,286,308,328,343],{},[60,287,288,291,292,298,301,302],{},[13,289,290],{},"Vite Plugin Vue","：如果你在使用 Vue.js，可以安装这个插件来处理 Vue 组件：",[169,293,296],{"className":294,"code":295,"language":174},[172],"\nnpm install @vitejs\u002Fplugin-vue --save-dev\n",[176,297,295],{"__ignoreMap":178},[299,300],"br",{},"配置：",[169,303,306],{"className":304,"code":305,"language":174},[172],"import vue from '@vitejs\u002Fplugin-vue';\n\nexport default defineConfig({\n  plugins: [vue()],\n});\n",[176,307,305],{"__ignoreMap":178},[60,309,310,313,314,320,301,322],{},[13,311,312],{},"Vite Plugin React","：对于 React 项目，使用官方 React 插件：",[169,315,318],{"className":316,"code":317,"language":174},[172],"\nnpm install @vitejs\u002Fplugin-react --save-dev\n",[176,319,317],{"__ignoreMap":178},[299,321],{},[169,323,326],{"className":324,"code":325,"language":174},[172],"import react from '@vitejs\u002Fplugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n});\n",[176,327,325],{"__ignoreMap":178},[60,329,330,333,334,340,342],{},[13,331,332],{},"Vite Plugin TypeScript","：Vite 原生支持 TypeScript，但你可以通过插件进一步优化：",[169,335,338],{"className":336,"code":337,"language":174},[172],"\nnpm install vite-plugin-tsconfig-paths --save-dev\n",[176,339,337],{"__ignoreMap":178},[299,341],{},"这个插件帮助你解决 TypeScript 路径别名问题。",[60,344,345,348,349],{},[13,346,347],{},"Vite Plugin PWA","：支持将你的应用转化为渐进式 Web 应用（PWA）：",[169,350,353],{"className":351,"code":352,"language":174},[172],"\nnpm install vite-plugin-pwa --save-dev\n",[176,354,352],{"__ignoreMap":178},[52,356,357],{"id":357},"适用场景",[125,359,360,366,372],{},[60,361,362,365],{},[13,363,364],{},"现代 Web 应用","：Vite 是一个非常适合用于构建现代 Web 应用的工具，尤其是与 Vue.js 和 React 等现代框架结合使用时，能提供极致的开发体验。",[60,367,368,371],{},[13,369,370],{},"需要高效开发和构建速度的项目","：Vite 的快速启动和热更新使得它成为开发大规模项目时的理想选择。",[60,373,374,377],{},[13,375,376],{},"支持原生 ES 模块的浏览器","：Vite 借助浏览器对原生 ES 模块的支持，使得开发时可以避免繁重的打包过程。",[52,379,380],{"id":380},"总结",[10,382,383],{},"Vite 是一个现代化的前端构建工具，拥有快速启动、增量编译、热模块替换等优势。它的简单配置和插件系统使得前端开发更加高效，适合现代 Web 应用的开发。通过 Vite，开发者可以体验到更高效、更流畅的开发体验。",{"title":178,"searchDepth":385,"depth":385,"links":386},2,[387,389,390,391,392,393],{"id":54,"depth":388,"text":55},3,{"id":122,"depth":388,"text":123},{"id":147,"depth":388,"text":148},{"id":280,"depth":388,"text":280},{"id":357,"depth":388,"text":357},{"id":380,"depth":388,"text":380},"Vite 是一个现代化的前端构建工具，主要用于开发和构建 JavaScript、TypeScript、Vue、React 等前端应用程序。Vite 由 Evan You（Vue.js 的创始人）开发，它的目标是提供一个极快的开发体验，同时确保构建性能也很高效。","md",{},true,"\u002Fvue\u002Fvite",{"description":394},"Vue\u002Fvite","rrjKJv_qoHuFsHLdBholg-ZwRzyOmT2FHZeBDr89gzA",1791042468104]