Laravel9执行npm run dev时Mix无法运行导致认证页样式异常

核心问题原因：Laravel 9 默认前端构建工具为 Vite，但 laravel/ui 生成的 Bootstrap 认证脚手架基于 Laravel Mix 工作流，版本兼容、配置冲突、依赖残留都会导致编译流程异常。按以下步骤逐一排查即可：

1. 处理Node版本兼容问题 #

先执行 node -v 查看本地Node版本：

• Laravel Mix 6.x 要求 Node 版本 >=12.14.0，优先使用14.x、16.x LTS版本，稳定性最高。
• 如果本地是Node 17及以上版本，会触发OpenSSL 3.0兼容报错，直接修改项目根目录package.json里的scripts配置：

"scripts": {
    "dev": "NODE_OPTIONS=--openssl-legacy-provider mix",
    "watch": "NODE_OPTIONS=--openssl-legacy-provider mix watch",
    "prod": "NODE_OPTIONS=--openssl-legacy-provider mix --production"
}

Windows系统如果直接加环境变量不生效，先执行npm install cross-env -D安装跨平台环境变量工具，再把脚本前缀替换为cross-env即可，例如"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider mix"。

2. 清理缓存与冗余配置，重装依赖 #

绝大多数编译异常都是依赖安装错乱、缓存残留导致的，按顺序执行清理操作：

# 删除已安装的依赖目录
rm -rf node_modules
# 删除依赖锁文件
rm -f package-lock.json yarn.lock
# 删除Laravel 9默认自带的Vite配置，避免和Mix冲突
rm -f vite.config.js

清理完成后打开package.json，确认devDependencies中包含必要的构建依赖，缺项直接手动补充：

"devDependencies": {
    "@popperjs/core": "^2.11.6",
    "axios": "^1.1.2",
    "bootstrap": "^5.2.3",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0"
}

确认配置无误后执行npm install重新安装全部依赖。

3. 核对构建配置与模板资源引用 #

• 确认项目根目录存在webpack.mix.js配置文件，基础编译规则如下：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

• 打开认证脚手架生成的布局模板resources/views/layouts/app.blade.php，把头部的资源引用从默认的Vite指令替换为Mix辅助函数：

{{-- 删掉原有的@vite(['resources/css/app.css', 'resources/js/app.js'])代码 --}}
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

这一步是最高发的坑：Laravel 9默认模板带Vite引用标签，但是用Mix编译的资源不会被Vite识别，直接导致页面加载不到CSS/JS文件。

4. 重新执行编译 #

配置全部核对完成后，执行开发环境编译命令：

npm run dev

编译成功后public/css、public/js目录下会生成编译后的app.css、app.js文件，刷新页面即可看到正常加载的认证页样式。如果需要开发时实时热更新，执行npm run watch即可；生产环境部署时执行npm run prod生成压缩后的静态资源。

*补充排查点：如果编译成功但页面仍报资源404，检查public目录下是否存在css、js子目录，确保web服务运行用户对public目录有读取权限。

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