如何在特定路径中构建vite每个css文件（JS路径有效，但不适用于CSS文件）（已修复！）

Question

已更新！！！

我尝试了下面的代码，它将所有 JS 文件放入正确的文件夹结构中，但不幸的是它不适用于 CSS 文件。有人可以帮助我吗？

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
    build: {
        outDir: "public/build/assets",
        rollupOptions: {
            input: {
                "js/app": path.resolve(__dirname, "resources/js/app.js"),
                "js/bootstrap": path.resolve(
                    __dirname,
                    "resources/js/bootstrap.js"
                ),
                "js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
                "js/sockets/all": path.resolve(
                    __dirname,
                    "resources/js/sockets/all.js"
                ),
                "js/layouts/smart": path.resolve(
                    __dirname,
                    "resources/js/layouts/smart.js"
                ),
                "js/libraries/cs": path.resolve(
                    __dirname,
                    "resources/js/libraries/cs.js"
                ),
                "js/libraries/skin": path.resolve(
                    __dirname,
                    "resources/js/libraries/skin.js"
                ),
                "js/libraries/vertex": path.resolve(
                    __dirname,
                    "resources/js/libraries/vertex.js"
                ),
                "js/libraries/widget": path.resolve(
                    __dirname,
                    "resources/js/libraries/widget.js"
                ),
                "js/app/layouts/bxslider": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/bxslider.js"
                ),
                "js/app/layouts/page": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/page.js"
                ),
                "js/app/layouts/portal": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/portal.js"
                ),
                "js/app/modules/admin/managing/listing": path.resolve(
                    __dirname,
                    "resources/js/app/modules/admin/managing/listing.js"
                ),
                "js/app/modules/admin/member/member": path.resolve(
                    __dirname,
                    "resources/js/app/modules/admin/member/member.js"
                ),
                "js/config/core/dev/app": path.resolve(
                    __dirname,
                    "resources/js/config/core/dev/app.js"
                ),
                "css/app": path.resolve(__dirname, "resources/css/app.css"),
                "css/vendor": path.resolve(
                    __dirname,
                    "resources/css/vendor.css"
                ),
                "css/app/layouts/cms": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/cms.css"
                ),
                "css/app/layouts/auth": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/auth.css"
                ),
                "css/app/layouts/page": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/page.css"
                ),
                "css/app/layouts/admin": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/admin.css"
                ),
                "css/app/layouts/portal": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/portal.css"
                ),
            },
            output: {
                entryFileNames: (chunkInfo) => {
                    if (chunkInfo.name.startsWith("js/")) {
                        return `${chunkInfo.name}.js`; // Avoid adding 'js/' again
                    }
                    if (chunkInfo.name.startsWith("css/")) {
                        return `${chunkInfo.name}.css`; // Avoid adding 'css/' again
                    }
                    return `${chunkInfo.name}.js`; // Default
                },
                chunkFileNames: (chunkInfo) => {
                    if (chunkInfo.name.startsWith("js/")) {
                        return `${chunkInfo.name}.js`; // Same logic for chunks
                    }
                    if (chunkInfo.name.startsWith("css/")) {
                        return `${chunkInfo.name}.css`;
                    }
                    return `${chunkInfo.name}.js`; // Default
                },
                assetFileNames: (assetInfo) => {
                    if (assetInfo.name?.endsWith(".css")) {
                        // Place general CSS files in the correct folder
                        if (assetInfo.name.includes("layouts")) {
                            return `css/app/layouts/[name].[hash][extname]`;
                        }
                        return `css/[name].[hash][extname]`;
                    }

                    if (assetInfo.name?.endsWith(".js")) {
                        return `js/[name].[hash][extname]`;
                    }
                    return `assets/[name].[hash][extname]`;
                },
                sourcemap: true,
            },
        },
    },
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/css/vendor.css",
                "resources/css/app/layouts/cms.css",
                "resources/css/app/layouts/auth.css",
                "resources/css/app/layouts/page.css",
                "resources/css/app/layouts/admin.css",
                "resources/css/app/layouts/portal.css",
                "resources/js/app.js",
                "resources/js/bootstrap.js",
                "resources/js/vendor.js",
                "resources/js/sockets/all.js",
                "resources/js/layouts/smart.js",
                "resources/js/libraries/cs.js",
                "resources/js/libraries/skin.js",
                "resources/js/libraries/vertex.js",
                "resources/js/libraries/widget.js",
                "resources/js/app/layouts/bxslider.js",
                "resources/js/app/layouts/page.js",
                "resources/js/app/layouts/portal.js",
                "resources/js/app/modules/admin/managing/listing.js",
                "resources/js/app/modules/admin/member/member.js",
                "resources/js/config/core/dev/app.js",
            ],
            refresh: true,
        }),
    ],
});

---

老问题！！

我想用Vite实现类似下面的方式，

下面是我尝试过的代码，但所有 js 和 cs 文件都构建在 public/build/assets 文件夹中。但我想要这样的东西。

例如，

resources/css/app.js 需要存储在里面 public/build/assets/css/app.js
resources/css/admin/member/index.js 需要存放在里面 public/build/assets/css/admin/member/index.js
resources/css/admin/lead/index.js 需要存放在里面 public/build/assets/css/admin/lead/index.js
**
JS 文件也类似。**

下面是我尝试过的代码。

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
    build: {
        outDir: "public/build",
    },
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/css/vendor.css",
                "resources/css/app/layouts/cms.css",
                "resources/css/app/layouts/auth.css",
                "resources/css/app/layouts/page.css",
                "resources/css/app/layouts/admin.css",
                "resources/css/app/layouts/portal.css",
                "resources/js/app.js",
                "resources/js/bootstrap.js",
                "resources/js/vendor.js",
                "resources/js/sockets/all.js",
                "resources/js/layouts/smart.js",
                "resources/js/libraries/cs.js",
                "resources/js/libraries/skin.js",
                "resources/js/libraries/vertex.js",
                "resources/js/libraries/widget.js",
                "resources/js/app/layouts/bxslider.js",
                "resources/js/app/layouts/page.js",
                "resources/js/app/layouts/portal.js",
                "resources/js/app/modules/admin/managing/listing.js",
                "resources/js/app/modules/admin/member/member.js",
                "resources/js/config/core/dev/app.js",
            ],
            refresh: true,
        }),
    ], 
});

有人可以帮我解决这个问题吗？这是我第一次使用Vite。我目前正在尝试手动将 Laravel 5.2 项目升级到 Laravel 10。因此我试图保持大部分文件结构相同。

Answer 1

更新我的 npm vite 包后解决了我的问题。如果有人再次遇到此问题，这是我的解决方案。

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
    build: {
        outDir: "public/build",
        emptyOutDir: false,
        assetsDir: "static",
        sourcemap: true,
        rollupOptions: {
            input: {
                "js/app": path.resolve(__dirname, "resources/js/app.js"),
                "js/bootstrap": path.resolve(
                    __dirname,
                    "resources/js/bootstrap.js"
                ),
                "js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
                "js/sockets/all": path.resolve(
                    __dirname,
                    "resources/js/sockets/all.js"
                ),
                "js/layouts/smart": path.resolve(
                    __dirname,
                    "resources/js/layouts/smart.js"
                ),
                "js/libraries/cs": path.resolve(
                    __dirname,
                    "resources/js/libraries/cs.js"
                ),
                "js/libraries/skin": path.resolve(
                    __dirname,
                    "resources/js/libraries/skin.js"
                ),
                "js/libraries/vertex": path.resolve(
                    __dirname,
                    "resources/js/libraries/vertex.js"
                ),
                "js/libraries/widget": path.resolve(
                    __dirname,
                    "resources/js/libraries/widget.js"
                ),
                "js/app/layouts/bxslider": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/bxslider.js"
                ),
                "js/app/layouts/page": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/page.js"
                ),
                "js/app/layouts/portal": path.resolve(
                    __dirname,
                    "resources/js/app/layouts/portal.js"
                ),
                "js/app/modules/admin/managing/listing": path.resolve(
                    __dirname,
                    "resources/js/app/modules/admin/managing/listing.js"
                ),
                "js/app/modules/admin/member/member": path.resolve(
                    __dirname,
                    "resources/js/app/modules/admin/member/member.js"
                ),
                "js/config/core/dev/app": path.resolve(
                    __dirname,
                    "resources/js/config/core/dev/app.js"
                ),
                "css/app": path.resolve(__dirname, "resources/css/app.css"),
                "css/vendor": path.resolve(
                    __dirname,
                    "resources/css/vendor.css"
                ),
                "css/app/layouts/cms": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/cms.css"
                ),
                "css/app/layouts/auth": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/auth.css"
                ),
                "css/app/layouts/page": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/page.css"
                ),
                "css/app/layouts/admin": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/admin.css"
                ),
                "css/app/layouts/portal": path.resolve(
                    __dirname,
                    "resources/css/app/layouts/portal.css"
                ),
            },
            output: {
                entryFileNames: (chunkInfo) => {
                    if (chunkInfo.name.startsWith("js/")) {
                        return `${chunkInfo.name}.[hash].js`;
                    }
                    if (chunkInfo.name.startsWith("css/")) {
                        return `${chunkInfo.name}.css`;
                    }
                    return `${chunkInfo.name}.[hash].js`;
                },
                chunkFileNames: (chunkInfo) => {
                    if (chunkInfo.name.startsWith("js/")) {
                        return `${chunkInfo.name}.[hash].js`;
                    }
                    if (chunkInfo.name.startsWith("css/")) {
                        return `${chunkInfo.name}.css`;
                    }
                    return `${chunkInfo.name}.[hash].js`;
                },
                assetFileNames: (assetInfo) => {
                    if (assetInfo.name?.endsWith(".css")) {
                        return `[name].[hash][extname]`;
                    }

                    if (assetInfo.name?.endsWith(".js")) {
                        return `js/[name].[hash][extname]`;
                    }

                    if (
                        assetInfo.name.startsWith("fonts/") ||
                        assetInfo.name.startsWith("vendor/")
                    ) {
                        return `[name][extname]`;
                    }

                    return `[name].[hash][extname]`;
                },
            },
        },
    },
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/css/vendor.css",
                "resources/css/app/layouts/cms.css",
                "resources/css/app/layouts/auth.css",
                "resources/css/app/layouts/page.css",
                "resources/css/app/layouts/admin.css",
                "resources/css/app/layouts/portal.css",
                "resources/js/app.js",
                "resources/js/bootstrap.js",
                "resources/js/vendor.js",
                "resources/js/sockets/all.js",
                "resources/js/layouts/smart.js",
                "resources/js/libraries/cs.js",
                "resources/js/libraries/skin.js",
                "resources/js/libraries/vertex.js",
                "resources/js/libraries/widget.js",
                "resources/js/app/layouts/bxslider.js",
                "resources/js/app/layouts/page.js",
                "resources/js/app/layouts/portal.js",
                "resources/js/app/modules/admin/managing/listing.js",
                "resources/js/app/modules/admin/member/member.js",
                "resources/js/config/core/dev/app.js",
            ],
            refresh: true,
            esm: true,
        }),
    ],
});