Vite5 基础篇

遗憾随她而去.2026-01-13 8:30

Vite 是一个前端构建工具,他与Webpack最大时的区别就是开发时的工作方式,webpack是先把整个项目分析一遍,打包成bundle,再起服务,项目一大,启动和热更新就慢

Vite在开发阶段直接基于浏览器原生的ES Module,把打包这件事往后拖,浏览器用到哪个模块,服务端才即时处理哪个模块,所以启动非常快

优势主要提现在:

项目越大,开发阶段的速度优势越明显,配置层面比Webpack简单,很多常见能力是内置的

对Vue3,React,ts的支持非常自然,不需要太多额外配置

缺点: 天然依赖ESM,对老旧浏览器支持不太友好,还有一些高度定制的老Webpack项目,迁移成本会比较高

一. 开发服务器选项(开发环境)

1.port 端口号

2.open : 自动打开浏览器

3.host: 是否允许局域网访问

4.strictPort: 端口被占用是否报错

5.proxy : 代理

export default defineConfig({

server: {

port: 3000, //端口号

open: true, //自动打开浏览器

host: true, //是否允许局域网访问

strictPort: true, //端口被占用是否报错

//代理

proxy: {

'/api': {

target: 'http://localhost:8080',

changeOrigin: true

}

}

}

})

二. 生产的构建配置 build

1.outDir 打包输出目录,默认dist

2. assetsDir 静态资源放的子目录,默认assets

3. 打包后chunk 体积警告阈值,单位是KB

4. reportCompressedSize: false 是否统计gzip/brotli的体积

5. minify: 是否压缩代码,

6. rellupOptions Vite生产构建底层就是Rollup,这里是直接控制Rollup行为

optput配置

入口文件输出规则: