php Laravel 10使用Nuxt 3和Vite航行:浏览器无法连接到24678

shstlldc  于 5个月前  发布在  PHP
关注(0)|答案(1)|浏览(54)

我有一个安装了Laravel 10和Nuxt 3的monorepo。我不想从我的主机运行nuxt dev服务器。相反,我想使用Laravel Sail运行它,因为Sail已经安装了所有依赖项(npm)。
目录结构为:
x1c 0d1x的数据



我也给自己写了一些小的Artisan命令,让生活变得更轻松:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;

class InstallFrontend extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'install:frontend';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Install frontend dependencies';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $result = Process::forever()->run('npm --prefix ./frontend install', function (string $type, string $output) {
            $this->info($output);
        });
    }
}

字符串

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;
use Illuminate\Process\Pipe;

class runFrontend extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'run:frontend';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Runs the frontend in dev mode.';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        Process::path(base_path() . '/frontend')->forever()->run('npm run dev -- --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });
    }
}


两个命令都运行得很好。
现在的问题是:我无法通过websockets连接到nuxt dev服务器。据我所知,Nuxt 3使用Vite作为dev服务器。但浏览器总是拒绝连接HMR:

我已经在我的docker-compose.yml中打开了所需的端口:

version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        ports:
            - '${APP_PORT:-80}:80'
            - '${FRONTEND_PORT:-3000}:3000'
            - '${VITE_SERVER_PORT:-5173}:5173'
            - 24678:24678
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis


并将此添加到nuxt.config.ts:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', 'nuxt-icon'],
  runtimeConfig: {
    public: {
      baseURL: 'http://localhost'
    }
  },
  vite: {
    server: {
      hmr: {
        protocol: "ws",
        host: "localhost"
      }
    }
  }
})


但是没有什么帮助。浏览器无法连接,我不知道为什么。
还有一个非常奇怪的行为,我无意中提到:我以前在我的工匠命令中有过这样的行为:

Process::path(base_path() . '/frontend')->forever()->run('npm run dev --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });


而不是:

Process::path(base_path() . '/frontend')->forever()->run('npm run dev -- -o --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });


这将导致在/frontend目录中创建一个新的.nuxt文件夹:

非常奇怪的是,我能够访问具有工作HMR的开发服务器,但它不是我的实际应用程序,因为开发服务器为新创建的服务器提供服务。所以浏览器只是显示一些默认的Nuxt 3应用程序:x1c4d 1x
所以这个问题似乎与任何连接错误本身无关。Vite似乎只是无法从.nuxt文件夹中为已经存在的应用程序提供服务?
有没有人能帮我把这个工作做好?:)
先谢谢你了!

dauxcl2d

dauxcl2d1#

尝试将docker-compose CHOKIDAR_USEPOLLING:true添加到环境中

environment: 
   CHOKIDAR_USEPOLLING: true

字符串
用nuxt 3.9为我工作
你打算如何在nuxt中安装新软件包?

相关问题