Laravel 10 + Vite环境中Bootstrap加载404问题求助

1. 确保Bootstrap CSS正确导入 #

你的app.js仅导入了./bootstrap.js，但默认的bootstrap.js仅处理JS逻辑（如Popper、Axios），未包含Bootstrap的CSS文件，需手动引入：

• 方式一：直接在resources/js/app.js中添加CSS导入：

import './bootstrap';
import 'bootstrap/dist/css/bootstrap.css'; // 新增该行

window.Echo.private('chat')
  .listen('MessageSent', (e) => {
    this.messages.push({
      message: e.message.message,
      user: e.user
    });
  });

• 方式二：若使用Sass，在resources/sass/app.scss中引入Bootstrap：

@import 'bootstrap/scss/bootstrap';

再在app.js中导入该SCSS文件：

import './bootstrap';
import '../sass/app.scss'; // 新增该行

// Echo逻辑代码...

2. 配置Vite入口文件 #

打开项目根目录的vite.config.js，确保Laravel插件的input数组包含JS和CSS/Sass入口，让Vite正确打包Bootstrap资源：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/sass/app.scss' // 用CSS则替换为对应路径
            ],
            refresh: true,
        }),
    ],
});

3. 清理缓存并重新构建 #

执行以下命令彻底清理缓存、重新编译资源：

# 清除Laravel缓存
php artisan cache:clear
php artisan view:clear

# 重新构建Vite资源
npm run build

4. 检查生产环境APP_URL配置 #

确认.env文件中的APP_URL设置正确，Vite会依据该URL生成资源路径：

APP_URL=http://your-domain.test

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