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：指定要解析的文件扩展名列表。