Laravel生产环境是否需运行Vite开发服务器？部署遇资源错误

问题现象 #

执行npm run build完成构建后，不启动Vite开发服务器访问应用，页面抛出错误：

Unable to locate file in Vite manifest: resources/css/app.css.

但运行npm run dev时，页面样式和功能完全正常。

复现步骤 #

1. 执行项目初始化命令：

laravel new vite-test --git &&
cd .\vite-test\ &&
npm i &&
npm install -D tailwindcss postcss autoprefixer &&
npx tailwindcss init -p &&
php ./artisan serve

2. 修改以下文件：

• resources/views/welcome.blade.php：

<!-- resources\views\welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div class="h-screen w-screen bg-red-500"></div>
</body>
</html>

• tailwind.config.js：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

• resources/css/app.css：

/* resources\css\app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

3. 执行npm run build后访问页面，触发上述错误。

问题原因 #

Vite默认在生产构建时，会将CSS文件内联到对应的JS入口文件中，不会单独生成独立的app.css文件。因此public/build/manifest.json里不存在resources/css/app.css的映射条目，导致Laravel的@vite指令找不到对应资源。

解决方案 #

提供两种可行方案，按需选择：

方案1：强制Vite拆分输出独立CSS文件 #

在项目根目录的vite.config.js中添加build.cssCodeSplit配置，强制Vite将CSS单独打包：

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,
        }),
    ],
    build: {
        cssCodeSplit: true // 新增该配置项
    }
});

修改完成后重新执行npm run build，Vite会生成独立的app.css文件，@vite指令即可正常加载资源。

方案2：移除@vite中的CSS文件引用 #

由于生产构建时CSS已内联到JS文件中，只需保留JS入口的引用即可，CSS会通过JS自动注入到页面：
修改resources/views/welcome.blade.php的head部分：

<head>
    @vite('resources/js/app.js')
</head>

重新执行npm run build后，页面即可正常加载Tailwind样式。

额外注意事项 #

• 确保生产环境的.env文件中APP_ENV=production，Laravel会自动切换到Vite生产资源加载模式。
• 执行npm run build后，检查public/build目录是否生成了manifest.json和对应的资源文件。

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