vite学习笔记

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

vite 打包底层使用的是 rollup 和 esbuild。它们的作用都是将项目文件打包成需要的“静态”文件！这些静态服务最终还是要交给一个服务来代理用户才能访问的，比如 nginx、express static 等。

js通过node作为后端开发的语言时也是需要模块化开发的，同时也需要项目管理公里工具，例如webpack等来实现工程化，但是node的后端项目没有打包过程例如java可以打包为jar，go可以打包为二进制文件，js时解释性语言直接部署源码。js作为后端时也可以使用wabpack，vite作为项目管理工具。

vite支持常用前端框架

node使js脱离浏览器也可以独立运行，要想使用模块开发就需要先安装node环境，node自带npm（node package manager）：node.js 的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） ，npm 是随同 node.js 一起安装的包管理工具。Vite 需要 Node.js 版本 18+，20+。

node与npm

npm create vue@latest

构建的项目如下：

在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

使用vite开发时是使用静态服务器开发，web页面都是通过服务服务器返回的而不是浏览器直接解析，因为浏览器不认识vue组件需要打包。这里vite就充当了服务器。

vite构建的vue项目是vue3项目。

vite服务器的启动命令

# 启动vite服务器命令
npm run vite dev
npm run vite serve
npm run vite

# 指定端口
npm run vite --port 80

构建静态资源

npm run vite build

命令在package.json中可以配置

vite严格遵循ES6规范，其他如CommonJS必须先转为ES6规范，包括模块。