Laravel Vite:生产环境中的资产阻塞/混合内容问题

Question

我的应用程序托管在一个EC2实例后面的一个弹性负载均衡器，它管理我的SSL证书。在这个EC2实例中，我的nginx配置将所有http-请求重定向到https。我最近改用了Vite，这给我带来了很多麻烦。当我在调用npm run build后将我的应用程序推到服务器上时，我的资产就被阻塞了。在浏览器控制台中，我得到：

Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...

我的设置：

vite.config.js

export default defineConfig({
    server: {
        host: 'localhost',
    },
    plugins: [
        laravel([
            'resources/assets/sass/app.sass',
            // etc...
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

在服务器块中设置"https: true“无助于我。

.env

APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com

在我的刀片模板中，我使用了Vite-指令：

@vite('resources/assets/sass/app.sass')

我尝试了以下解决方案：

• 将$proxies = '*'设置为TrustProxies.php，这没有任何效果。
• 在URL::forceScheme('https');中设置AppServiceProvider.php，这将加载资产，但会导致许多其他问题。

不知何故，@vite-指令并没有将我的资产解析为安全资产。有了Laravel，我可以打电话给secure_asset。

我怎么才能解决这个问题？

Answer 1

最后，我使用了托管代理-中间件。然而，那时我忘记了将其注册为全局中间件。

Answer 2

import fs from 'fs';

const host = 'example.com';
server: {
    host,
    hmr: {host},
    https: {
        key: fs.readFileSync(`ssl-path`),
        cert: fs.readFileSync(`ssl-cert-path`),
    },
},

您应该将其添加到vite.config.js文件中，同时将ASSET_URL添加到.env文件中。