如何配置Vite监听Vue文件目录并生成无index.html的同构JS/CSS文件？

当然可以实现，你当前的配置缺少多入口指定和目录结构保持的关键配置，修改后的完整配置如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { fileURLToPath, URL } from 'url';
import glob from 'glob'; // 需要先安装：npm i glob -D

// 获取static_mpa目录下的所有入口文件（可根据需要调整匹配规则）
const getEntries = () => {
  const entries = {};
  // 匹配static_mpa下所有.js/.vue/.ts文件，排除子目录可去掉/**
  glob.sync('./static_mpa/**/*.{js,vue,ts}').forEach(file => {
    // 生成输出路径的key，保持和源目录相对结构一致
    const entryName = file.replace('./static_mpa/', '').replace(/\.(vue|ts)$/, '.js');
    entries[entryName] = file;
  });
  return entries;
};

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [
      vue(),
      legacy({
        targets: ['defaults', 'not IE 11'],
      }),
    ],
    base: '/',
    publicDir: false, // 如果不需要复制public目录资源，设为false
    resolve: {
      extensions: ['.js', '.vue', '.ts'],
      alias: {
        '@': fileURLToPath(new URL('./static_mpa', import.meta.url))
      }
    },
    build: {
      brotliSize: false, // 文件大小报告
      minify: 'terser',
      outDir: 'static_test',
      assetsDir: './',
      emptyOutDir: true, // 每次构建清空输出目录
      rollupOptions: {
        input: getEntries(), // 指定多入口文件
        output: {
          // 保持输出文件的目录结构和源目录一致
          entryFileNames: '[name]',
          chunkFileNames: '[name].js',
          assetFileNames: '[name].[ext]',
          // 禁用代码分割，如需拆分公共代码可自定义配置
          manualChunks: undefined
        }
      },
      // 禁用自动生成HTML文件
      ssrManifest: false,
      manifest: false // 不需要manifest.json可设为false
    },
    // 确保监听static_mpa目录下的所有文件变动
    server: {
      watch: {
        include: ['static_mpa/**/*']
      }
    }
  }
});

关键配置说明 #

• 多入口配置：通过glob匹配static_mpa目录下的所有目标文件，生成对应入口，确保每个Vue/JS文件都被单独构建。
• 输出结构保持：entryFileNames: '[name]'会沿用入口的相对路径和文件名，保证输出目录static_test和源目录结构完全一致。
• 禁用HTML生成：通过多入口配置替代默认的index.html入口，Vite不会自动生成index.html文件。
• 监听目录：server.watch.include明确指定监听static_mpa目录，确保文件变动触发热更新或重新构建。

注意事项 #

1. 先安装依赖：npm install glob --save-dev
2. 根据实际需求调整glob.sync的匹配规则，比如是否包含子目录、特定后缀等。
3. Vue组件内的样式会自动提取为对应名称的CSS文件（比如Component.vue会生成Component.css），保持和JS文件的目录结构一致。

内容的提问来源于stack exchange，提问作者Булат Шарафутдинов