Laravel 8中JetStream的CSS/JS失效，页面显示@vite指令内容

问题原因 #

Laravel 8 默认使用 Laravel Mix 作为前端构建工具，而 @vite 是 Laravel 9 及以上版本才引入的 Vite 专用指令。你的项目里装了 Laravel Mix 但未配置 Vite，导致 Blade 模板无法解析 @vite，直接把原始指令输出到页面上，进而引发样式和脚本加载失败。

解决方案 #

方案1：改用Laravel Mix的加载语法（推荐，适配Laravel 8原生环境）

将 app.blade.php 中的 @vite(['resources/css/app.css', 'resources/js/app.js']) 替换为 Laravel Mix 对应的加载代码：

<!-- 样式文件 -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

<!-- 脚本文件 -->
<script src="{{ mix('js/app.js') }}"></script>

替换后完整的头部代码片段：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Styles -->
    @livewireStyles
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}"></script>
</head>

执行以下命令确保资源编译完成：

npm install
npm run dev # 开发环境使用，生产环境替换为 npm run prod

方案2：升级为Vite构建（仅适用于Laravel 8.9及以上版本）

如果你的Laravel版本是8.9+，可以切换到Vite构建：

1. 安装Vite相关依赖：

npm install laravel-vite-plugin --save-dev

2. 在项目根目录新建或修改 vite.config.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'],
            refresh: true,
        }),
    ],
});

3. 删除或重命名原有的 webpack.mix.js 文件，避免冲突
4. 启动Vite开发服务器：

npm run dev

5. 清除视图缓存确保指令生效：

php artisan view:clear

额外检查 #

• 确认Laravel版本：执行 php artisan --version，低于8.9的版本只能使用方案1
• 清除视图缓存：执行 php artisan view:clear，避免缓存的旧模板导致问题

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