当 Livewire 放入子文件夹 NGINX 时出现 404

Question

我使用 livewire 制作了 laravel 应用程序，并使用 NGINX 尝试过，一切正常。这是我在 NGINX 上的初始配置

server {
 listen 80;
 listen [::]:80 ipv6only=on;

 # Log files for Debugging
 access_log /var/log/nginx/vhostlaravel-access.log;
 error_log /var/log/nginx/vhostlaravel-error.log;

 # Webroot Directory for Laravel project
 root /home/nicholas/Downloads/tes/Strongbee-new-explore/public;
 #root /var/www/strongbee-web-3.0;
    index index.php index.html index.htm;

 # Your Domain Name
 server_name nicholas.com;


    location / {
            try_files $uri $uri/ /index.php?$query_string;
    }

    # PHP-FPM Configuration Nginx
     location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }

}

然后我希望 Laravel 位于子文件夹中（explore），所以 https://nicholas.com /探索。 我尝试了这个配置，但在我的 livewire 上收到 404 查看照片

server {
 listen 80;
 listen [::]:80 ipv6only=on;

 # Log files for Debugging
 access_log /var/log/nginx/vhostlaravel-access.log;
 error_log /var/log/nginx/vhostlaravel-error.log;

 # Webroot Directory for Laravel project
 #root /home/nicholas/Downloads/tes/Strongbee-new-explore/public;
 root /var/www/strongbee-web-3.0;
    index index.php index.html index.htm;

 # Your Domain Name
 server_name nicholas.com;


    location ^~ /explore {
        alias /home/nicholas/Downloads/tes/Strongbee-new-explore/public;
        try_files $uri $uri/ @explore;
        location ~ \.php {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/run/php/php7.4-fpm.sock;
            fastcgi_param SCRIPT_FILENAME /home/nicholas/Downloads/tes/Strongbee-new-explore/public/index.php;
        }
    }

    location @explore {
        rewrite /explore/(.*)$ /explore/index.php?/$1 last;
    }

    location / {
            try_files $uri $uri/ /index.php?$query_string;
    }

    # PHP-FPM Configuration Nginx
     location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }

}

我认为子文件夹上的 try_file 有问题。 请帮助我

这是我的 livewire.php

    <?php

use phpDocumentor\Reflection\Types\Null_;

return [

    /*
    |--------------------------------------------------------------------------
    | Class Namespace
    |--------------------------------------------------------------------------
    |
    | This value sets the root namespace for Livewire component classes in
    | your application. This value affects component auto-discovery and
    | any Livewire file helper commands, like `artisan make:livewire`.
    |
    | After changing this item, run: `php artisan livewire:discover`.
    |
    */

    'class_namespace' => 'App\\Http\\Livewire',

    /*
    |--------------------------------------------------------------------------
    | View Path
    |--------------------------------------------------------------------------
    |
    | This value sets the path for Livewire component views. This affects
    | file manipulation helper commands like `artisan make:livewire`.
    |
    */

    'view_path' => resource_path('views/livewire'),

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    | The default layout view that will be used when rendering a component via
    | Route::get('/some-endpoint', SomeComponent::class);. In this case the
    | the view returned by SomeComponent will be wrapped in "layouts.app"
    |
    */

    'layout' => 'layouts.app',

    /*
    |--------------------------------------------------------------------------
    | Livewire Assets URL
    |--------------------------------------------------------------------------
    |
    | This value sets the path to Livewire JavaScript assets, for cases where
    | your app's domain root is not the correct path. By default, Livewire
    | will load its JavaScript assets from the app's "relative root".
    |
    | Examples: "/assets", "myurl.com/app".
    |
    */

    'asset_url' => '/explorer',
    /*
    |--------------------------------------------------------------------------
    | Livewire App URL
    |--------------------------------------------------------------------------
    |
    | This value should be used if livewire assets are served from CDN.
    | Livewire will communicate with an app through this url.
    |
    | Examples: "https://my-app.com", "myurl.com/app".
    |
    */

    'app_url' => NULL,

    /*
    |--------------------------------------------------------------------------
    | Livewire Endpoint Middleware Group
    |--------------------------------------------------------------------------
    |
    | This value sets the middleware group that will be applied to the main
    | Livewire "message" endpoint (the endpoint that gets hit everytime
    | a Livewire component updates). It is set to "web" by default.
    |
    */

    'middleware_group' => 'web',

    /*
    |--------------------------------------------------------------------------
    | Livewire Temporary File Uploads Endpoint Configuration
    |--------------------------------------------------------------------------
    |
    | Livewire handles file uploads by storing uploads in a temporary directory
    | before the file is validated and stored permanently. All file uploads
    | are directed to a global endpoint for temporary storage. The config
    | items below are used for customizing the way the endpoint works.
    |
    */

    'temporary_file_upload' => [
        'disk' => null,        // Example: 'local', 's3'              Default: 'default'
        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
        'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs.
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
    ],

    /*
    |--------------------------------------------------------------------------
    | Manifest File Path
    |--------------------------------------------------------------------------
    |
    | This value sets the path to the Livewire manifest file.
    | The default should work for most cases (which is
    | "<app_root>/bootstrap/cache/livewire-components.php"), but for specific
    | cases like when hosting on Laravel Vapor, it could be set to a different value.
    |
    | Example: for Laravel Vapor, it would be "/tmp/storage/bootstrap/cache/livewire-components.php".
    |
    */

    'manifest_path' => null,

    /*
    |--------------------------------------------------------------------------
    | Back Button Cache
    |--------------------------------------------------------------------------
    |
    | This value determines whether the back button cache will be used on pages
    | that contain Livewire. By disabling back button cache, it ensures that
    | the back button shows the correct state of components, instead of
    | potentially stale, cached data.
    |
    | Setting it to "false" (default) will disable back button cache.
    |
    */

    'back_button_cache' => false,

    /*
    |--------------------------------------------------------------------------
    | Render On Redirect
    |--------------------------------------------------------------------------
    |
    | This value determines whether Livewire will render before it's redirected
    | or not. Setting it to "false" (default) will mean the render method is
    | skipped when redirecting. And "true" will mean the render method is
    | run before redirecting. Browsers bfcache can store a potentially
    | stale view if render is skipped on redirect.
    |
    */

    'render_on_redirect' => false,

];

这是我的 .env

    APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:aZ59Hf9EfJfdqY8LQyCsqf9gGi9N6u6yn6uUboJHgmo=
APP_DEBUG=true
APP_URL=http://nicholas.com/explorer

ASSET_URL = http://nicholas.com/explorer


API_BASE_URL = https://api.strongbee.tech


LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Answer 1

配置资产基本 URL

默认情况下，Livewire 通过应用程序中的以下路由提供其 JavaScript 部分 (livewire.js)：/livewire/livewire.js。

生成的实际脚本标记默认为：

有两种情况会导致此默认行为被破坏：

您发布了 Livewire 资产并且现在正在为它们提供服务来自诸如“assets”之类的子文件夹。

您的应用程序托管在您域的非根路径上。例如：https://your-laravel-app.com/application。在这种情况下，实际资源将从 /application/livewire/livewire.js 提供，但生成的脚本标记将尝试获取 /livewire/livewire.js >。

要解决上述任一问题，您可以在 config/livewire.php 中配置“asset_url”，以自定义添加到src="" 属性。

例如，发布 Livewire 的配置文件后，以下是可以解决上述两个问题的设置：

'asset_url' => '/assets'

或

'asset_url' => '/application'

参见 官方文档了解更多信息。

附加说明：

• 我缓存了 livewire 路由，因此需要 php artisan optimization 来消除所有 404。

Answer 2

查看浏览器尝试加载的内容：

    @livewireScripts
</body>
</html>

渲染：

    <script src="/livewire/livewire.js?id=xxxxx" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
</body>
</html>

我的 config/livewire.php 的 asset_url 为：

'asset_url' => env('LIVEWIRE_ASSETS'),

LIVEWIRE_ASSETS 不存在于.env 文件，所以我只需要在文件中添加变量：

LIVEWIRE_ASSETS=/sub_directory

现在脚本正确加载：

    <script src="/sub_directory/livewire/livewire.js?id=xxxxx" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
</body>
</html>