Laravel 11项目执行Vite命令触发Invalid URL错误求助

问题现象 #

执行npm run dev或其他Vite命令时，触发以下错误：

error when starting dev server:
TypeError: Invalid URL
    at new URL (node:internal/url:806:29)
    at getAdditionalAllowedHosts (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:59194:29)
    at resolveConfig (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:66549:29)
    at async _createServer (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:62901:18)
    at async CAC.<anonymous> (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/cli.js:736:20)

环境信息 #

• NPM: v10.9.0
• Node: v20.18.0
• PHP: 8.2
• Laravel: 11
• .env 配置：APP_URL=http://127.0.0.1:8000
• 相同配置在另一个Laravel 11（Twill CMS）项目中可正常运行

已尝试操作 #

• 删除node_modules后重新安装
• 重启Mac排查端口占用
• 分别用php artisan serve和Docker（Laradock）启动项目

配置文件 #

package.json #

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "postcss": "^8.4.47",
        "tailwindcss": "^3.4.13",
        "@rollup/plugin-inject": "^5.0.5",
        "laravel-vite-plugin": "^1.0",
        "vite": "^5.0"
    },
    "dependencies": {
        "include-media": "^2.0.0",
        "jquery": "^3.7.1",
        "sass": "^1.83.4"
    }
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

var config = {
    plugins: [
        laravel({
            input: [
                'resources/scss/style.scss',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        })
    ],
    build: {
        assetsDir: '',
    },
};

export default defineConfig(({command, mode, ssrBuild}) => {
    if (command === 'serve') {
        config.publicDir = 'public';
        config.build = {
            assetsDir: '',
            copyPublicDir: false,
            emptyOutDir: true,
        };
    }

    return config;
});

解决方法 #

1. 校验.env文件的APP_URL格式 #

确认APP_URL=http://127.0.0.1:8000的格式：

• 等号前后无空格（如APP_URL = xxx会导致读取失败）
• 无多余引号或特殊字符
• 确保URL前缀http:///https://完整

2. 移除冲突的publicDir配置 #

Laravel Vite插件已默认处理public目录映射，手动设置publicDir: 'public'可能引发冲突。修改vite.config.js：

export default defineConfig(({command, mode, ssrBuild}) => {
    if (command === 'serve') {
        // 移除 config.publicDir = 'public'; 这一行
        config.build = {
            assetsDir: '',
            copyPublicDir: false,
            emptyOutDir: true,
        };
    }

    return config;
});

3. 手动指定Laravel Vite插件的URL #

在laravel插件配置中直接传入URL，避免环境变量读取异常：

laravel({
    input: [
        'resources/scss/style.scss',
        'resources/js/app.js'
    ],
    refresh: true,
    url: 'http://127.0.0.1:8000', // 手动指定URL
}),

4. 清除Laravel配置缓存 #

执行命令刷新配置缓存，确保.env最新配置生效：

php artisan config:clear

5. 检查环境变量加载情况 #

在vite.config.js开头添加打印代码，确认APP_URL是否被正确读取：

console.log('APP_URL:', process.env.APP_URL);

执行npm run dev查看控制台输出，如果未读取到，安装dotenv并配置加载：

npm install dotenv --save-dev

然后在vite.config.js顶部添加：

import dotenv from 'dotenv';
dotenv.config();

6. 升级Laravel Vite插件 #

尝试升级到最新版插件，确保与Laravel 11兼容性：

npm update laravel-vite-plugin

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