如何在Laravel项目中使用Vite编译打包public目录下Metronic Admin Panel的现有CSS/JS资源

嘿，我懂你现在的处境：在Laravel项目里用着Metronic Admin面板，目前所有的CSS和JS资源都存在public目录下：

• CSS 存放路径：public/cms/assets/css/
• JS 存放路径：public/cms/assets/js/

之前你在主布局Blade文件里都是用传统的asset()辅助函数来引入这些资源，大概是这样的写法：

<head>
    {{-- 其他头部元信息、标题等内容 --}}
    <link href="{{ asset('cms/assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css">
    {{-- 其他Metronic CSS文件引入 --}}
    <script src="{{ asset('cms/assets/plugins/global/plugins.bundle.js') }}"></script>
    {{-- 其他Metronic JS文件引入 --}}
</head>

现在要切换用Vite来编译打包这些资源，我给你整理了实操步骤：

1. 梳理资源结构（可选但推荐） #

Vite本身可以直接处理public目录下的文件，但按照Laravel+Vite的最佳实践，建议把需要编译的Metronic资源迁移到resources目录下，比如新建resources/cms/assets目录，把public里对应路径的CSS、JS以及依赖的字体、图片等静态资源都复制过来。要是你实在不想移动资源，也可以直接在Vite配置里指定public目录的资源路径，不过迁移到resources目录会更便于后续的维护和编译。

2. 配置Vite识别Metronic资源 #

打开项目根目录的vite.config.js，修改配置内容，让Vite能找到并处理你的Metronic资源：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // 这里添加你的Metronic入口资源文件，比如主样式和脚本文件
            input: [
                'resources/cms/assets/css/style.bundle.css',
                'resources/cms/assets/js/scripts.bundle.js',
                // 把其他需要编译的Metronic CSS/JS文件都列在这里
            ],
            refresh: true, // 开启热刷新，开发时更方便
        }),
    ],
    // 如果你选择保留资源在public目录，需要添加这个配置
    // publicDir: 'public/cms/assets'
});

3. 更新Blade布局里的资源引入方式 #

把原来的asset()辅助函数换成Vite对应的指令或函数：

• 如果你把资源迁移到了resources目录，用@vite指令：

<head>
    {{-- 其他头部内容 --}}
    @vite(['resources/cms/assets/css/style.bundle.css', 'resources/cms/assets/js/scripts.bundle.js'])
</head>

• 要是资源还在public目录，就用viteAsset()辅助函数：

<head>
    {{-- 其他头部内容 --}}
    <link href="{{ viteAsset('cms/assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ viteAsset('cms/assets/plugins/global/plugins.bundle.js') }}"></script>
</head>

4. 执行编译打包 #

最后在终端里运行对应的Vite命令就可以了：

• 开发环境下实时编译并开启热刷新：npm run dev
• 生产环境下打包优化资源：npm run build

一些要注意的小细节 #

• 如果你迁移了资源目录，记得把public里原来的旧资源清理掉，避免访问时混淆。
• Metronic的不少资源会依赖相对路径（比如字体文件、背景图），要确保Vite能正确处理这些静态资源的路径，必要时可以在vite.config.js里配置resolve.alias或者调整资源内部的相对引用路径。
• 部分Metronic的JS文件是自执行的，Vite编译后不会影响它的功能，但如果遇到模块化的代码，可能需要稍微调整下引入方式。

内容来源于stack exchange