Laravel执行npm run dev输出异常 访问localhost报404如何解决

你参考的教程基于使用Laravel Mix作为前端构建工具的旧版Laravel制作，从Laravel 9.2版本开始，官方已默认将前端构建工具替换为Vite，两者运行逻辑、命令输出、使用方式存在明显差异，并非你的设备或操作有误，M1芯片Mac不存在该场景下的特殊兼容问题。

你当前执行npm run dev后的所有表现都是Vite的正常运行状态：

• 终端持续被占用是因为该命令启动了Vite热更新开发服务器，会常驻前台实时监听前端文件改动并自动同步更新，不需要反复执行该命令，需要输入其他命令直接打开新的终端标签页操作即可，无需关闭当前运行中的服务。
• 直接访问http://localhost:3000提示页面不存在是正常表现：Vite开发服务器不直接提供Laravel业务页面的访问服务，仅负责处理JS、CSS等前端资源的热更新，你需要访问配置的http://project.test地址来打开Laravel项目，Vite会自动将前端资源注入到页面中。

你可以根据自己的需求二选一：

方案1：适配新版默认的Vite工作流（推荐） #

不需要改任何配置，调整使用习惯即可：

• 开发时保持npm run dev的终端窗口常驻，不要关闭
• 访问项目走Laravel配置的APP_URL即http://project.test，不要访问3000端口的Vite服务地址
• 如果需要单次编译资源、执行完就退出终端（和旧版Mix的npm run dev单次编译行为一致），不要跑dev命令，执行生产构建命令即可：

npm run build

该命令会一次性打包编译所有前端资源到public目录，执行完成后自动退出，不会常驻占用终端。

方案2：回退到Laravel Mix，和教程操作完全对齐 #

如果你需要完全跟着教程的步骤操作，可以把构建工具换回Laravel Mix：

1. 移除Vite相关依赖

npm remove vite laravel-vite-plugin

2. 安装Laravel Mix依赖

npm install laravel-mix --save-dev

3. 删除项目根目录下的vite.config.js文件，新建webpack.mix.js配置文件，写入基础配置：

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

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css');

4. 修改package.json中的scripts字段，替换为Mix对应的命令：

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "prod": "npm run production",
    "production": "mix --production"
}

5. 将Blade模板中引入前端资源的@vite指令删除，替换为Mix的资源引入写法：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

配置完成后再执行npm run dev就会出现教程里提到的Finished. Please run mix again提示，执行完会自动退出不会占用终端。

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