Laravel 9搭配Vite时如何将resources目录资源发布到public目录

你的配置不生效，核心原因是laravel-vite-plugin的入口参数仅接收需要参与构建的JS/CSS文件路径字符串，你传入的from/to格式复制配置对象不属于该插件支持的配置项，不会被解析执行。

方案1：使用Vite原生静态资源处理（官方推荐，无需额外插件） #

Vite默认会自动处理代码中引用的静态资源，自动完成版本哈希、路径映射，最终输出到public目录下的构建目录，不需要额外写复制配置：

1. 将静态资源统一存放在resources/assets目录下
2. 在代码中通过Vite提供的能力引用资源即可，比如Blade模板中引用图片：

<img src="{{ Vite::asset('resources/assets/images/logo.png') }}" alt="站点logo">

执行npm run build后，所有被引用的静态资源会自动输出到public/build/assets目录。

方案2：整目录批量复制静态资源（适合资源不需要显式引用的场景） #

如果你需要把resources/assets整个目录原封不动复制到public目录，不需要Vite做编译、哈希处理，可以通过静态复制插件实现，步骤如下：

1. 安装开发依赖：

npm install vite-plugin-static-copy --save-dev

2. 修改vite.config.js配置，注意静态复制配置要和laravel插件入口配置分开，不能嵌套在laravel插件的参数里：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/css/global/plugins.css',
            'resources/css/style.css',
        ]),
        // 静态资源复制配置作为独立插件项注册
        viteStaticCopy({
            targets: [
                {
                    src: 'resources/assets/*',
                    dest: 'assets'
                }
            ]
        })
    ],
});

3. 执行npm run build后，resources/assets下的所有文件会原封不动复制到public/assets目录。

• 执行npm run dev启动开发服务时，Vite不会将静态资源实体写入public目录，资源通过本地开发服务器内存映射提供访问，只有执行生产构建命令npm run build时才会生成实体文件到public目录
• 静态复制的资源不会自动添加版本哈希，无法自动处理缓存更新，如果需要缓存爆破能力，优先选择方案1的Vite::asset()引用方式
• 不要把需要编译的JS、CSS、Sass/Less等预编译文件放到静态复制目录，这类文件必须配置在laravel插件的入口数组中，否则不会经过编译流程

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