CodeIgniter 4集成Tailwind CSS的Vite配置问题求助

问题现象 #

在CodeIgniter 4应用中集成Tailwind CSS时，执行npm run build后，public/assets目录下出现无限嵌套的dist/site/assets/dist/...结构，无法得到预期的public/assets/dist/{site,admin}/styles.css和scripts.js目录结构。

问题原因 #

Vite默认将项目根目录下的public文件夹作为静态资源目录（publicDir），当构建输出目录设置在public/assets/dist下时，Vite会在构建过程中扫描public目录内的所有文件（包括刚生成的dist文件夹），导致循环处理生成无限嵌套的目录结构；同时原配置未明确资源路径基准，也会引发路径解析错误。

修正后的配置文件 #

1. vite.config.site.cjs #

const { defineConfig } = require('vite');
const path = require('path');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = defineConfig({
  // 禁用默认publicDir扫描，避免循环处理输出目录
  publicDir: false,
  build: {
    outDir: path.resolve(__dirname, 'public/assets/dist/site'),
    // 关闭assetsDir，直接将资源输出到outDir根目录
    assetsDir: '',
    rollupOptions: {
      input: path.resolve(__dirname, 'public/assets/src/site/scripts/scripts.js'),
      output: {
        entryFileNames: 'scripts.js',
        assetFileNames: 'styles.css',
      }
    },
    emptyOutDir: true,
  },
  css: {
    postcss: {
      plugins: [
        tailwindcss('./tailwind.config.site.cjs'),
        autoprefixer
      ]
    }
  }
});

2. vite.config.admin.cjs #

const { defineConfig } = require('vite');
const path = require('path');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = defineConfig({
  publicDir: false,
  build: {
    outDir: path.resolve(__dirname, 'public/assets/dist/admin'),
    assetsDir: '',
    rollupOptions: {
      input: path.resolve(__dirname, 'public/assets/src/admin/scripts/scripts.js'),
      output: {
        entryFileNames: 'scripts.js',
        assetFileNames: 'styles.css',
      }
    },
    emptyOutDir: true,
  },
  css: {
    postcss: {
      plugins: [
        tailwindcss('./tailwind.config.admin.cjs'),
        autoprefixer
      ]
    }
  }
});

其他说明 #

package.json、tailwind.config.admin.cjs、tailwind.config.site.cjs无需修改，保持原有内容即可。

验证效果 #

执行npm run build后，将生成预期的目录结构：

public/assets/
└── dist/
    ├── site/
    │   ├── styles.css
    │   └── scripts.js
    └── admin/
        ├── styles.css
        └── scripts.js

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