默认 Laravel + Vite 配置将 WebSocket 连接抛出失败:

所以 Laravel 决定再次创新并修复未损坏的部分,因此 Mix 消失了,现在默认资产捆绑与 Vite 一起使用。

我遵循他们文档中的绝对默认设置来处理一堆前端错误,最后只剩下几个:

我将 Laragon 与 SSL 一起使用

我没有配置任何额外的东西,我的 vite.config.js 看起来像这样:

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

当我运行 npm run dev 并访问 Laragon 域时,我在控制台中得到以下信息:

client.ts:78 WebSocket connection to 'wss://127.0.0.1:5173/' failed.
client.ts:48 [vite] failed to connect to websocket.
your current setup:
  (browser) 127.0.0.1:5173/ <--[HTTP]--> 127.0.0.1:5173/ (server)
  (browser) 127.0.0.1:5173/ <--[WebSocket (failing)]--> 127.0.0.1:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .

我想我需要在某处配置我的实际域?我尝试在配置中的服务器对象中执行此操作,但对这些错误没有帮助。

PS:现在在我的 vue 文件中,我需要导入包括 .vue 扩展名,例如 import Button from '@/Components/Button.vue' 有什么办法可以像使用 Laravel Mix 一样省略 .vue?

stack overflow Default Laravel + Vite configuration throws WebSocket connection to failed:
原文答案

答案:

作者头像

当我使用 npm run build 而不是常规的 npm run dev 时,问题就消失了。我猜,产品的构建机制不同,因此控制台中没有与 WSS 相关的错误。