vite打包的简单配置
Vite 是一个面向现代浏览器的新型前端构建工具,它利用浏览器原生的 ES 模块支持进行快速开发。相比传统的打包工具(如 Webpack),Vite 在开发模式下具有更快的冷启动速度和即时热更新能力。
javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 支持 Vue 3 单文件组件
import ElementPlus from 'unplugin-vue-components/vite'; // 自动按需引入 Element Plus 组件
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入常用 API
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
vue(), // 启用 Vue 插件
AutoImport({ // 自动导入 Vue、Pinia 等常用 API
imports: ['vue', 'vue-router', 'pinia'],
dts: true, // 生成 auto-imports.d.ts 类型声明文件
}),
Components({ // 自动注册 Vue 组件
extensions: ['vue'], // 支持的组件类型
dts: true, // 生成 components.d.ts 类型声明文件
}),
ElementPlus({ // 自动按需加载 Element Plus 组件
useSource: true, // 使用源码版本以支持主题定制
}),
],
server: {
port: 80, // 开发服务器端口
open: true, // 自动打开浏览器
proxy: { // 配置代理解决跨域问题
'/api': {
target: 'http://localhost:8080', // 后端服务地址
changeOrigin: true, // 是否更改请求头中的 origin
rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写,去掉 /api 前缀
},
},
},
build: {
outDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源存放目录
minify: 'terser', // 使用 terser 进行压缩(支持压缩 JavaScript)
terserOptions: {
compress: {
drop_console: true, // 删除 console 语句
drop_debugger: true, // 删除 debugger 语句
},
},
rollupOptions: {
input: {
main: './index.html', // 主入口文件
nested: './nested/index.html', // 子页面入口文件
},
},
},
resolve: {
alias: { // 路径别名配置
'@': path.resolve(__dirname, './src'), // 将 @ 映射为 src 目录
},
},
});
- 核心配置说明
1、plugins:插件列表,用于增强 Vite 的功能。
vue():启用对 Vue 3 单文件组件的支持。
AutoImport:自动导入常用的 Vue、Pinia、Vue Router 等
API,减少手动导入。 Components:自动注册 Vue 组件,无需在每个文件中手动导入。 ElementPlus:按需加载
Element Plus 组件,提升性能并减少包体积。
2、server:开发服务器配置。
port:指定本地开发服务器监听的端口号。 open:是否在启动时自动打开浏览器。 proxy:设置反向代理,解决开发环境下的跨域问题。
3、build:构建生产环境时的配置。
outDir:指定构建输出的目录,默认是 dist。 assetsDir:静态资源的存放路径。 minify:指定压缩工具,通常使用
terser 来压缩 JavaScript。 terserOptions:自定义 Terser 压缩选项,如删除调试代码。
rollupOptions.input:多页面应用的入口配置。
4、resolve: 用于配置模块解析行为。它告诉 Vite 如何查找和加载模块。
alias:路径别名,方便项目中引用模块或组件。 extensions:指定要解析的文件扩展名列表。