如何配置Vite实现类似Webpack Mix的单JS文件打包？

要让Vite打包后只生成单个JS文件，核心是修改vite.config.js中的构建配置，禁用默认的代码分割逻辑并强制合并所有模块，具体配置如下：

基础配置示例 #

import { defineConfig } from 'vite'
// 根据你的框架引入对应插件，Vue用@vitejs/plugin-vue，React用@vitejs/plugin-react
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 指定项目主入口文件
      input: {
        main: './src/main.js'
      },
      output: {
        // 自定义输出的单个JS文件名
        entryFileNames: 'bundle.js',
        // 禁用自动代码分割，不生成独立的组件chunk
        manualChunks: undefined,
        // 将动态导入的模块直接嵌入主文件，避免额外请求
        inlineDynamicImports: true,
        // 输出格式选iife（浏览器直接运行）或umd（多环境兼容）
        format: 'iife'
      }
    },
    // 可选：关闭sourcemap以减小文件体积
    sourcemap: false
  }
})

关键配置说明 #

• manualChunks: undefined：覆盖Vite默认的代码分割规则，不再将组件、第三方库拆分为独立文件
• inlineDynamicImports: true：处理项目中的动态导入（比如import()语法），将这些模块直接合并到主文件中，避免产生额外的chunk文件
• entryFileNames：统一输出的文件名，确保最终只生成一个JS文件
• format: 'iife'：生成适合浏览器直接运行的自执行函数，若需支持Node.js等环境可换成umd

可选优化（减小文件体积） #

如果打包后的文件过大，可以开启更彻底的压缩：

build: {
  // ...上述基础配置
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true, // 移除代码中的console语句
      drop_debugger: true // 移除debugger语句
    }
  }
}

执行vite build后，dist目录下只会生成指定的单个JS文件，和Webpack Mix的单文件打包效果一致。

内容的提问来源于stack exchange，提问作者Misael