Laravel 9中如何在vite.config.js中添加自定义JS文件？

当然可以实现，下面是两种对应场景的方案：

方案一：将自定义JS作为Vite入口文件（推荐） #

这种方式完全匹配你原来mix.copy().version()的核心需求——输出文件到指定目录+自动版本化（哈希戳防缓存），同时还能利用Vite的打包编译能力。

1. 修改vite.config.js，把自定义JS加入入口列表：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/custom-file.js' // 添加你的自定义JS文件
            ],
            refresh: true,
        }),
    ],
});

2. 在Blade模板中通过@vite指令引入该文件：

@vite('resources/js/custom-file.js')

执行npm run build后，Vite会自动将文件打包输出到public/build/js目录，文件名会带上唯一哈希（比如custom-file.abc123.js），和原来version()的缓存击穿效果完全一致。

方案二：单纯复制静态JS文件（无需编译） #

如果你的custom-file.js已经是无需编译的成品文件，只想复制到public/js目录，可以使用Rollup的copy插件：

1. 安装插件：

npm install @rollup/plugin-copy --save-dev

2. 修改vite.config.js配置复制规则：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import copy from '@rollup/plugin-copy';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        copy({
            targets: [
                { 
                    src: 'resources/js/custom-file.js', 
                    dest: 'public/js'
                }
            ],
            hook: 'writeBundle' // 确保在打包完成后执行复制
        })
    ],
});

注意：这种方式不会自动给文件加哈希，如果需要版本化，建议手动在引入时添加时间戳参数，或者优先使用方案一。

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