Laravel 9集成Vite后资源加载出现404错误求助

问题根源分析 #

• 直接在Blade中硬编码资源路径，未使用Laravel Vite插件提供的@vite指令（Vite编译后会生成带哈希的资源文件名，硬编码路径无法匹配）
• vite.config.js中错误设置了root目录为src，导致Vite无法定位到Laravel默认的resources资源目录
• Blade模板存在HTML语法错误，影响资源加载
• 入口资源重复配置：app.js已导入styles.scss，无需在vite.config.js的input中单独添加

分步修复方案 #

1. 修正vite.config.js配置 #

移除错误的root设置，删除重复的resources/sass/styles.scss入口（因为已在app.js中导入），调整后的配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
const path = require('path')

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
    resolve: {
      alias: {
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
      }
    },
    server:{
        host:'127.0.0.1'
    }
});

2. 修复Blade模板的资源引用与语法错误 #

使用Laravel Vite提供的@vite指令引入资源，替换原有的硬编码路径，同时修正HTML语法错误：

<!DOCTYPE html>
<html lang="en">
<head>
    {{-- 使用@vite指令加载Vite编译的资源 --}}
    @vite(['resources/js/app.js'])
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

说明：@vite会自动根据环境（开发/生产）加载对应的资源，开发环境加载Vite dev server的资源，生产环境加载npm run build后生成的哈希资源文件，同时自动注入对应的CSS（因为app.js已导入styles.scss）。

3. 确认app.js的导入逻辑（保持现有即可） #

确保app.js正确导入Bootstrap和Sass文件：

import './bootstrap';
import '../sass/styles.scss';
import * as bootstrap from 'bootstrap';

4. 重新启动服务与编译 #

• 停止当前的npm run dev和Laravel服务
• 重新启动Laravel开发服务器：php artisan serve
• 重新启动Vite开发服务：npm run dev
• 生产环境执行：npm run build后再启动Laravel服务

验证修复 #

访问页面后，Chrome控制台不再出现404错误，Bootstrap样式和脚本正常生效。

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