Default Laravel + Vite configuration throws WebSocket connection to failed:

Question

So Laravel decided to innovate once again and fix what was not broken, so Mix is gone and now default asset bundling goes with Vite.

I'm following the absolute default in their documentation to a bunch of front-end bugs and finally only several remained:

I use Laragon with SSL.

I haven't configured anything additional and my vite.config.js looks like this:

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,
                },
            },
        }),
    ],
});

When I run npm run dev and visit the Laragon domain I get the following in the console:

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 .

I guess I need to configure my actual domain somewhere? I tried doing that in a server object in the config, but it didn't help those errors.

PS: Now in my vue files I need to import including the .vue extension e.g. import Button from '@/Components/Button.vue' is there any way I can ommit the .vue like it was with Laravel Mix?

Answer 1

我以前没有使用过 laragon，但是如果你有一个自定义域，例如 http://cutom-domain.test，你需要告诉 vite 像这样使用证书；

• 在您的 中vite.config.js，添加server具有以下配置的密钥

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

import fs from 'fs';
import { homedir } from 'os';
import { resolve } from 'path';

// Ignore the protocol on the host, ie do not put "http"
const host = 'cutom-domain.test';

const viteServerConfig = host => {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)

    if (!fs.existsSync(keyPath)) {
        return {}
    }

    if (!fs.existsSync(certificatePath)) {
        return {}
    }

    return {
        hmr: {host},
        host,
        https: { 
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    }
}

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

感谢这篇博文，它解释了更多内容 -让 Vite 和 Valet 一起玩得很好

Answer 2

我不知道它是否仍然相关，但是查看laravel-vite-plugin的源代码我找到了一种以非常简单的方式解决这个问题的方法，甚至不需要更改文件vite.config.js。

\n

将这两个变量放入文件中.env，并使用系统上 .key 和 .crt 文件的完整路径设置它们：

\n

VITE_DEV_SERVER_KEY=\'C:/laragon/etc/ssl/laragon.key\'\nVITE_DEV_SERVER_CERT=\'C:/laragon/etc/ssl/laragon.crt\'\n

\n

不要更改vite.config.js文件中的任何内容。这是我的（全新安装的 laravel + jetstream w/惯性和--ssr）：

\n

import { defineConfig } from \'vite\';\nimport laravel from \'laravel-vite-plugin\';\nimport vue from \'@vitejs/plugin-vue\';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: \'resources/js/app.js\',\n            ssr: \'resources/js/ssr.js\',\n            refresh: true,\n        }),\n        vue({\n            template: {\n                transformAssetUrls: {\n                    base: null,\n                    includeAbsolute: false,\n                },\n            },\n        }),\n    ],\n});\n

\n

就是这样。Runnpm run dev和 Vite 将“神奇地”启动一个启用 https 的开发服务器。

\n

 VITE v4.0.4  ready in 1248 ms\n\n  \xe2\x9e\x9c  Local:   https://laravel.test:5173/\n  \xe2\x9e\x9c  Network: https://192.168.1.2:5173/\n  \xe2\x9e\x9c  press h to show help\n\n  LARAVEL v9.48.0  plugin v0.7.3\n\n  \xe2\x9e\x9c  APP_URL: https://laravel.test/\n

\n

尽管官方文档中的配置也可以工作，但这种方式要简单得多，并且文件中没有定义 host、key 和 cert 变量，但它们是动态反映开发环境的。

\n

希望这对某人有帮助。

\n

这是我找到这个的来源，您也可以检查node_modules\\laravel-vite-plugin\\dist\\index.js您的项目。

\n

Answer 3

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

因此，换句话说，执行生产 Vite 构建并部署它（如果您正在远程项目上进行测试）。