Laravel安装laravel/ui后执行npm run dev启动异常问题咨询

算力阿峰

2026-8-27

故障原因

运行状态误判：Laravel 9 默认用Vite替代了旧版Laravel Mix作为前端构建工具，npm run dev启动的是常驻的开发热更新服务，启动完成后会一直停留在运行界面监听文件变化，不会像Mix那样执行完一次性编译就退出，你看到的停留状态不是卡住，是服务已经正常启动。
参数传递语法错误：npm脚本传参需要用--作为npm参数和脚本实际参数的分隔符，你执行的npm run dev -host 3004没有加分隔符，从日志可以看到实际传给vite的只有位置参数"3004"，--host参数根本没有被Vite接收，自然不会生效，才会出现自动选择3001端口的情况。
入口配置缺失：跳过依赖预打包的警告是因为Vite没有识别到前端资源编译入口，通常是安装laravel/ui生成Bootstrap相关文件后，没有同步更新vite.config.js里的入口路径配置导致的。
3000端口被其他程序占用属于正常的端口避让逻辑，本身不是故障。

解决方法

先明确运行逻辑：npm run dev启动后不要关闭终端窗口，这个状态下服务已经正常运行，直接访问Laravel项目页面即可，修改前端资源时Vite会自动触发热更新。如果需要生成生产环境可部署的静态编译文件，执行npm run build就会执行一次性编译并退出。
修正传参命令：需要自定义启动参数时，正确的命令格式为npm run dev -- --port 3004 --host 0.0.0.0，参数前加--分隔后，Vite就能正常接收端口、host配置，按指定参数启动。
修复Vite配置：打开项目根目录的vite.config.js，确认laravel插件的input项正确配置了Bootstrap对应的资源入口，参考配置如下：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
    // 可以在这里固定端口和host，不用每次启动传参
    server: {
        port: 3004,
        host: '0.0.0.0'
    }
});

配置保存后重启Vite服务，依赖预打包的警告就会消失。

如果配置后仍有异常，删除项目下的node_modules目录和package-lock.json文件，重新执行npm install安装依赖，排除依赖包损坏、版本不匹配的问题。

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