如何在Laravel中正确加载页面专属脚本？

核心前提 #

主布局中仅调用一次@vite()指令，确保热模块替换客户端脚本只注入一次，示例：

<!-- 主布局文件（如resources/views/layouts/app.blade.php） -->
<head>
    <!-- 仅在此处引入主JS/CSS，保证客户端脚本唯一加载 -->
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
    {{ $slot }}
    
    <!-- 预留脚本栈，用于接收页面专属脚本 -->
    @stack('scripts')
</body>

方法一：动态导入页面专属脚本（推荐） #

符合Vite模块机制，支持热替换与代码分割，无需额外配置Vite入口：

1. 在resources/js/下创建页面专属脚本，比如resources/js/pages/user-profile.js
2. 在对应页面模板中，通过@push推送动态导入的脚本块：

<!-- 页面模板（如resources/views/profile.blade.php） -->
@extends('layouts.app')

@section('content')
    <!-- 页面内容 -->
@endsection

@push('scripts')
    <script type="module">
        // Vite自动处理依赖与编译，开发/生产环境路径自动适配
        import '../js/pages/user-profile.js';
    </script>
@endpush

方法二：配置独立Vite入口+使用Vite::asset() #

适用于无需和主JS共享依赖的独立页面脚本：

1. 修改vite.config.js，添加页面专属脚本入口：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/css/app.css',
                'resources/js/pages/user-profile.js', // 新增页面专属入口
            ],
            refresh: true,
        }),
    ],
});

2. 在页面模板中，通过Vite::asset()获取编译后的带版本号路径，推送到脚本栈：

@push('scripts')
    <script src="{{ Vite::asset('resources/js/pages/user-profile.js') }}"></script>
@endpush

两种方法均能避免重复注入Vite客户端脚本，同时保证开发/生产环境的路径正确性。

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