Laravel集成Vite后npm run dev无法打开本地服务器求助

1. 检查Vite配置的绑定地址 #

打开项目根目录的vite.config.js，确保服务器配置里的host设置为0.0.0.0或localhost，同时确认端口未被占用：

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 5173, // 默认端口，可修改为未被占用的端口
        hmr: {
            host: 'localhost',
        },
    },
    // ...其他配置
});

2. 确认本地端口占用情况 #

执行命令查看默认端口（5173）的占用状态：

• Windows：netstat -ano | findstr :5173
• Mac/Linux：lsof -i :5173
  若端口被占用，可杀掉对应进程，或修改Vite配置里的port为其他可用端口（如5174）。

3. 核对Laravel的.env配置 #

确保.env文件里的APP_URL与Vite服务器地址匹配：

APP_URL=http://localhost:8000
VITE_APP_URL="${APP_URL}"

注意：Vite需配合Laravel本地服务使用，要确保php artisan serve已正常启动，不要只运行Vite而未启动Laravel服务。

4. 清除缓存并重装依赖 #

• 清除Laravel缓存：php artisan cache:clear && php artisan config:clear
• 删除依赖目录与锁文件：rm -rf node_modules package-lock.json（Windows用rmdir /s node_modules && del package-lock.json）
• 重新安装依赖：npm install
• 重启Vite服务：npm run dev

5. 排查浏览器代理与防火墙 #

• 关闭浏览器代理插件，切换至无代理模式测试
• 临时关闭本地防火墙，确认是否是防火墙阻止了端口访问

6. 尝试使用本地IP访问 #

若localhost无法访问，可改用本地IP地址访问，比如http://192.168.x.x:5173（通过ipconfig/ifconfig命令查看本地IP）

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