无法使用 Laravel Sail with Laravel Mix 使 Browsersync 正常工作

Question

我已经设法让 Browsersync 部分工作，但是，每当我在页面加载后从我的应用程序发出请求时，请求都会发送到错误的 URL。

以下是我的 Browsersync 设置：

mix.browserSync({
    proxy: 'localhost',
    port: 8082,
    injectChanges: false,
    open: false,
    files: [
        './public/css/*.css',
        './public/js/*.js',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './resources/css/**/*.css',
    ],
})

这是我的 docker-compose.yml:

version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        working_dir: /var/www/html
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - "9865:22"
            - "8082:8082"
            - "8083:8083"
        # ...

我导航到 http://localhost:8082/，页面加载正常，Browsersync 显示已连接。但是，当我提交表单时，我得到以下信息：

据我了解，这是代理没有端口的问题，但是，我尝试将代理更改为 localhost:8082 然后我什至无法连接。我还尝试了将其更改为 127.0.0.1 的其他建议，但没有任何区别。

Answer 1

我通过设置以下配置解决了我的问题：

mix.browserSync({
    proxy: 'localhost:8081',
    port: 8082,
    ui: {
        port: 8083,
    },
    injectChanges: false,
    open: false,
    files: [
        './public/css/*.css',
        './public/js/*.js',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './resources/css/**/*.css',
    ],
    watchOptions: {
        usePolling: true,
        interval: 500,
    },
    ghostMode: false,
})

其中 8081 是在 .env 文件中设置的 APP_PORT。换句话说，Browsersync 需要代理到与您的应用运行相同的端口。

无法使用 Laravel Sail with Laravel Mix 使 Browsersync 正常工作

Cannot get Browsersync working properly with Laravel Sail with Laravel Mix

inertiajs

browser-sync

laravel-mix

laravel-mix-vue3

laravel-sail