net::ERR_CONNECTION_REFUSED使用Laravel 9，ReactJs使用vite-js

Question

我正在尝试使用Laravel 9和带有vite-js的ReactJS构建一个应用程序。我尝试按照命令进行构建。

npm运行dev

但我收到以下错误，

GET http://[：：1]：5173/resources/css/app.css net:：ERR_CONNECTION_REFUSED

GET http://[：：1]：5173/@vite/client net:：ERR_CONNECTION_REFUSED

GET http://[：：1]：5173/resources/js/app.jsx net:：ERR_CONNECTION_REFUSED

GET http://[：：1]：5173/@react refresh net:：ERR_CONNECTION_REFUSED

Answer 1

如果您在生产中输入了npm run build，那么您的.env文件看起来不错，但您仍然有作者这样的错误——只需删除文件public/hot即可。

Answer 2

对于那些使用Laravel Sail的用户，打开vite.config.js文件并进行如下配置：

export default defineConfig({
plugins: [
react(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
], 
server: {
hmr: {
host: 'localhost',
},
}
});

如果需要，停止并重新启动服务器sail npm run dev

Answer 3

这意味着您的资产尚未构建，请使用npm run build。

Answer 4

它对我来说很有用1-终端首次运行npm run dev2-然后运行npm run build

Answer 5

我想我可能已经找到了一个名为Rollup的构建选项的解决方案。在生产中构建时，汇总将删除未使用的代码。在这个过程中，它将捆绑所需的资产，并根据您当前使用的URL引用它们。

要修复它，你可以试试这个：

export default defineConfig({
build: {
rollupOptions: {}
}
})

Github上发布的一个类似问题帮助了我，所以也许你可以把它作为一个参考点。以下是讨论

Answer 6

在您的vite.config.js中添加host，这样它将强制它进入IPv4

export default defineConfig({
server: {
host: '127.0.0.1',  // Add this to force IPv4 only
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});

Answer 7

在我的案例中，问题是端口5173已经在使用中。我刚刚把它放了出来，一切都恢复了正常。希望能有所帮助。

Answer 8

如果你运行了npm run dev，那么你必须在public/hot中找到一个文件，并在其中重写正确的地址/URL。对我来说，http://127.0.0.1:5173有效。