Laravel Breeze (vue) 和 Homestead - npm run dev 和 HMR 不工作答案

【问题标题】：Laravel Breeze (vue) and Homestead - npm run dev and HMR not workingLaravel Breeze (vue) 和 Homestead - npm run dev 和 HMR 不工作
【发布时间】：2023-01-14 07:23:20
【问题描述】：

我按照文档中的说明进行操作：

家园：https://laravel.com/docs/9.x/homestead#installation-and-setup

Vue 和惯性微风：https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

当我运行npm run build时，一切正常。我可以通过http://homestead.test/访问我的新应用程序。当我尝试通过热重载使用开发服务器时npm run dev，浏览器（主机）中的调试控制台显示：

GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED

我已经尝试改变我的包.json文件从"dev": "vite", 到"dev": "vite --host homestead.test", 但这只会导致错误

GET http://homestead.test:5173/@vite/client net::ERR_CONNECTION_REFUSED
GET http://homestead.test:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED

在应用程序刀片.php脚本是用@导入的

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

@routes 似乎是 Laravel Ziggy 包的一部分。这方面没有错误。

但是 @vite('resources/js/app.js') 和 @inertiaHead 抛出错误。这些指令链接到错误的目的地。

如何解决这个问题？

【问题讨论】：

标签： laravel breeze homestead hot-reload

【解决方案1】：

我找到了解决方案。将服务器部分添加到您的vite.config.js.并将 app.css 添加到输入

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

export default defineConfig({
    server: {
        hmr: {
          host: "192.168.56.56",
        },
        host: "192.168.56.56",
        watch: {
          usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'], 
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

【讨论】：

有效。谢谢！另外我必须添加“别名”来修复控制台警告。

【解决方案2】：

我的解决方案是使用 Vite SSL 证书生成插件打开 HTTPS

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

export default defineConfig({
    server: {
        https: true,
    },
    plugins: [
        basicSsl(),
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

【讨论】：

【解决方案3】：

当我遇到这样的问题时，我会分享一些我的经验。这是因为在设备上未检测到现有 IP。

http://127.0.0.1:5173 就是导致这个错误发生的路由。所以我试着用

npm run build

之后我刷新了我的页面并成功打开了页面。

看起来它在开发阶段无法访问。这就是我的全部理解。抱歉，如果我传达的错误。

【讨论】：