Vite的组成

• 开发服务器：基于原生ES模块提供了 丰富的内建功能
• 构建指令：使用rollup打包代码，预配置构成

Vite特点

• vite 基于原生ESM开发服务 vite dev serve，无需打包项目源码，天然按需加载，可以利用文件级的浏览器缓存

• vite 使用 go 开发的 esbuild 工具，摒弃了原生js开发的弊端

• vite 内置了很多webpack的基础设置，包括 css 的解析，html 插件等等

Vite的好处

Vite利用现代浏览器支持ES Modules的模块化的特性，省略了打包，对需要编译的组件，例如单文件组件，Vite采用了另一种模式，即时编译，请求某个文件的时候才会编译某个文件，及时编译的好处：按需编译，速度会很快。

Vite配置文件

import { defineConfig } from “vite”;  
export default defineConfig({  
optimizeDeps:{  
exclude: [],  
},  
})

Vite的使用

npm run dev —mode development 会将mode设置为development传递进来 vite静态资源的处理：

import { defineConfig } from ‘vite’;
import path from ‘path’;
import vue from ‘@vitejs/plugin-vue’;
export default defineConfig({
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘src’),
‘/images’: ‘/src/assets/images’,
},
},
plugins: [vue()],
});