javascript - Nuxt.JS http/2 帮助和建议

Question

我目前正在使用 nuxt.js(使用内置服务器)构建应用程序。也就是说，我一直在通过开发运行谷歌灯塔，而在我的一生中，我无法让它为 http/2 服务。



里面nuxt.config.js我补充说:

render: {
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => preloadFiles
        .filter(f => f.asType === 'script' && f.file === 'runtime.js')
        .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
    }
}

也许我不明白 HTTP/2 如何与 nuxt 一起工作，如果有人能提供任何帮助或建议，那就太好了!

Answer 1

在撰写本文时，Nuxt 似乎不支持直接提供 HTTP/2。
很可能是因为通常在边缘(负载平衡器、CDN 等)上启用了 HTTP/2，它使用 HTTP/1(more info)与您的 Nuxt 服务器通信。
不过，您可以为 Nuxt 应用程序启用 HTTP/2 设置 Nginx 代理服务器:

安装和设置 Nginx (beginners guide)

生成 SSL 证书(HTTP/2 需要 HTTPS 连接)

将 Nginx 设置为 Nuxt 应用程序的反向 https http/2 代理，示例配置:

server {
    server_name  localhost_http2;
    listen 3001 ssl http2;

    ssl_certificate /pathTo/server.crt;
    ssl_certificate_key /pathTo/server.key;


    location / {
        # url of nuxt app
        proxy_pass http://localhost:3000/;
        proxy_buffering off;
        proxy_http_version 1.1;
    }
}

假设您在 http://localhost:3000/上运行 nuxt，当访问 https://localhost:3001/时，您的应用程序将使用 HTTP/2