使用 Nuxt 3 在本地主机上设置 HTTPS 的问题

Question

我正在尝试设置为本地主机使用 HTTPS 运行 Nuxt 3。我查看了网上已经提出的其他指南和问题，但它们似乎都在使用旧版本的 Nuxt，并且出于某种原因，这种方式不再有效。例如，我尝试使用 this 链接作为如何设置我的 nuxt.config.ts 文件的参考，但是，它对我来说不起作用。

使用服务器属性时，我收到错误“NuxtConfig 类型中不存在服务器”，但是，devServer 似乎至少没有给我任何错误（仍然无法正常工作）。这是我的

nuxt.config.file

import { fileURLToPath } from "node:url"

export default defineNuxtConfig({
    css: ["~/assets/global.scss"],
    experimental: {
        reactivityTransform: true,
    },
    app: {
        head: {
            htmlAttrs: {
                lang: "en",
            },
        },
    },
    devServer: {
        https: {
            key: fileURLToPath(new URL("~/certs/localhost-key.pem", import.meta.url)),
            cert: fileURLToPath(new URL("~/certs/localhost.pem", import.meta.url)),
        },
    },
})

SSL 证书是使用

mkcert

创建并自签名的。

生成 SSL 证书并安装所有内容并尝试访问 https://localhost:3000 后，出现错误“SSL_ERROR_RX_RECORD_TOO_LONG”。

如果有人能帮助我解决这个问题，我真的很感激。我以前从未这样做过，所以不太确定我在做什么，并且已经需要一段时间才能解决。

Answer 1

对于任何偶然发现这一点并寻找不同方法的人。

只需添加，

export default defineNuxtConfig({
  devServer: {
    https: {
      key: 'localhost-key.pem',
      cert: 'localhost.pem'
    }
  },
})

没有导入，没有文件读取。一切都很完美。然而，

您确实需要添加

NODE_TLS_REJECT_UNAUTHORIZED=0

环境变量

截至 2023 年 3 月 22 日，文档仍未更新，但代码已分叉并与正确信息合并。因此，文档仅需要更新。

Answer 2

看来我最终设法找到了一种在本地主机上设置 HTTPS 的方法。

我是这样做的：

首先，我按照这个简短指南设置并自签名 SSL 证书。我还将

nuxt dev

从

package.json

文件更改为以下

nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem

。

但是，这给了我一个

500 fetch failed

错误。通过遵循这个thread解决了这个问题，它基本上表明您需要添加

NODE_TLS_REJECT_UNAUTHORIZED=0

环境变量。

现在一切似乎都很完美！

Answer 3

生产情况如何？ 我在生产中也需要 SSL。如何实现这一点。 它不像开发那样工作。