Laravel10+React+Vite项目修改端口无效问题求助

1. 检查Laravel专属Vite配置文件 #

Laravel集成Vite时，根目录下的vite.config.js配置优先级高于package.json的命令行参数。打开文件确认是否设置了端口：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        port: 3000, // 确保此处设置为目标端口
        host: 'localhost',
    },
});

2. 确认执行命令的正确性 #

必须运行修改后的dev脚本，直接执行vite会忽略package.json配置：

npm run dev

3. 检查环境变量配置 #

Laravel的.env文件中若存在VITE_PORT变量，会覆盖其他端口设置：

# 要么删除该行，要么设置为3000
VITE_PORT=3000

4. 清理Vite缓存 #

Vite可能缓存旧配置，执行以下命令清理后重启服务：

npx vite --clear-cache
npm run dev

5. 排查内容不显示问题 #

若端口问题解决后内容仍不显示，检查以下项：

• 确认React组件挂载目标存在：在resources/js/app.jsx中，挂载元素需对应Blade视图中的DOM节点，比如：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

  对应Blade视图需包含：

  <div id="root"></div>
  @vite('resources/js/app.jsx')
  

• 查看浏览器控制台是否有组件导入错误、依赖缺失等报错信息。
• 确认vite.config.js中laravel插件的input路径与React入口文件一致。

6. 检查端口占用情况 #

若3000端口被其他程序占用，Vite会自动 fallback到5173，可通过以下命令排查：

# Windows系统
netstat -ano | findstr :3000

# macOS/Linux系统
lsof -i :3000

若端口被占用，关闭对应程序或更换其他端口。

内容的提问来源于stack exchange，提问作者abdelkarim el manssouri