如何在Vue.js + Vite.js项目构建时禁用代码拆分（chunk）功能

你之前的配置仅清空manualChunks没有生效，是因为Vite内置了默认的分块规则，同时Rollup对异步导入的默认处理也会生成独立chunk，仅修改这一项没有覆盖全部触发分块的逻辑。

完整可用配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 禁用CSS单独分块，所有样式合并到单个文件
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        // 完全禁用手动分块规则，覆盖Vite默认的vendor拆分逻辑
        manualChunks: undefined,
        // 内联所有动态导入内容，避免异步组件生成独立chunk
        inlineDynamicImports: true
      }
    }
  }
})

配置说明 #

• cssCodeSplit: false：Vite默认会把异步组件关联的CSS拆成单独文件，关闭后所有样式会统一打包到一个css文件中
• manualChunks: undefined：你之前配置为空对象并不会覆盖Vite内置的vendor拆分规则，设为undefined才能完全禁用Rollup的手动分块逻辑
• inlineDynamicImports: true：默认所有import()语法导入的异步模块都会生成独立chunk，开启后会把这些内容全部合并到入口文件中

注意事项 #

如果你的项目配置了多入口文件，inlineDynamicImports参数无法使用，需要先调整为单入口配置，才能完全禁用代码分块。

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