Nuxt.JS http/2 帮助和建议

Posted 2023-03-10

【中文标题】Nuxt.JS http/2 帮助和建议

【英文标题】：Nuxt.JS http/2 help and advice

【发布时间】：2020-05-20 13:32:36

【问题描述】：

我目前正在使用 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 一起工作，如果有人能提供任何帮助或建议，那就太好了！

【问题讨论】：

您是否成功确保 nuxt 资产通过 http2 提供服务？

【参考方案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 提供服务