Laravel Breeze(vue)和宅基地- npm运行开发和HMR不工作

62o28rlo 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(156)

我按照文档中的说明进行操作：
1.宅基地：https://laravel.com/docs/9.x/homestead#installation-and-setup
1.带有Vue和惯性的微风：https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia
当我运行npm run build时，一切正常。我可以通过http://homestead.test/访问我的新应用。当我尝试使用热重加载npm run dev的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

我已经尝试将我的 package.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

在 app.blade.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

来源：https://stackoverflow.com/questions/73506437/laravel-breeze-vue-and-homestead-npm-run-dev-and-hmr-not-working

2条答案

按热度按时间

insrf1ej1#

我已经找到了解决方案，在 * 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,
                },
            },
        }),
    ],
});

赞(0）回复(0）举报 2022-11-26

rkue9o1l2#

我的解决方案是打开带有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(),
    ],
});

赞(0）回复(0）举报 2022-11-26

我来回答

Laravel Breeze(vue)和宅基地- npm运行开发和HMR不工作

2条答案

相关问题

热门标签

最新问答