Vite打包生成两个JS文件（其一为空）的问题解决求助

问题根源 #

1. CSS作为Rollup入口导致空JS生成：将CSS文件直接作为Rollup入口时，Rollup处理非JS入口会生成一个空JS模块（仅用于触发CSS提取逻辑），这就是main2.js的来源。
2. 入口名称冲突：main.css和main.ts的入口名称均为main，Rollup会自动重命名第二个重名入口为main2.js。
3. 入口数组未扁平化：你的entries通过map生成的是二维数组（[[css文件路径], [js文件路径]]），未扁平化的数组无法被Rollup正确识别。

解决方案 #

选项1：推荐 - 通过JS入口导入CSS（符合Vite规范） #

无需单独将CSS作为入口，Vite会自动处理CSS打包，避免多余文件生成。

1. 在JS入口文件中导入CSS：
   修改src/scripts/entries/main.ts：

import '../../styles/main.css';

// 你的业务JS代码

2. 修改vite.config.js的入口配置，仅保留JS入口：

import { defineConfig } from 'vite';
import path from 'path';
import glob from 'glob';

const ROOT_PATH = './';
const SRC_DIR = 'src';
const ASSETS_DIR = 'assets';
const SCRIPTS_DIR = 'scripts';

// 仅获取JS入口文件
const entries = glob.sync(path.join(ROOT_PATH, SRC_DIR, SCRIPTS_DIR, 'entries', '*'), { onlyFiles: true });

export default defineConfig({
  build: {
    sourcemap: true,
    target: 'ES2015',
    outDir: path.join(ROOT_PATH, ASSETS_DIR),
    assetsDir: '',
    emptyOutDir: false,
    rollupOptions: {
      input: entries,
      output: {
        entryFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    }
  },
});

打包后只会生成main.js和main.css，无多余空JS文件。

选项2：单独打包CSS（需插件辅助） #

如果必须单独打包CSS文件不依赖JS导入，可通过插件阻止空JS生成：

1. 安装插件：

npm install vite-plugin-css-only --save-dev

2. 修改vite.config.js：

import { defineConfig } from 'vite';
import path from 'path';
import glob from 'glob';
import cssOnly from 'vite-plugin-css-only';

const ROOT_PATH = './';
const SRC_DIR = 'src';
const ASSETS_DIR = 'assets';
const SCRIPTS_DIR = 'scripts';
const STYLES_DIR = 'styles';

// 扁平化入口数组
const entries = [
  path.join(ROOT_PATH, SRC_DIR, STYLES_DIR, '*'),
  path.join(ROOT_PATH, SRC_DIR, SCRIPTS_DIR, 'entries', '*')
].map(pattern => glob.sync(pattern, { onlyFiles: true }))
.flat(); // 关键：将二维数组转为一维

export default defineConfig({
  plugins: [cssOnly()], // 阻止CSS入口生成空JS
  build: {
    sourcemap: true,
    target: 'ES2015',
    outDir: path.join(ROOT_PATH, ASSETS_DIR),
    assetsDir: '',
    emptyOutDir: false,
    rollupOptions: {
      input: entries,
      output: {
        entryFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    }
  },
});

打包后只会生成main.js和main.css，不再出现main2.js。

额外注意 #

确保你已安装glob依赖（如果未安装）：

npm install glob --save-dev

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