Nuxt 3本地HTTPS配置失败求助：遇SSL_ERROR_RX_RECORD_TOO_LONG错误

问题分析 #

SSL_ERROR_RX_RECORD_TOO_LONG错误本质是Nuxt开发服务器未正确启用HTTPS——客户端用HTTPS协议连接了一个仅支持HTTP的服务器。另外Nuxt 3已弃用旧版本的server配置项，需通过nitro节点配置开发服务器。

解决步骤 #

1. 修复证书路径解析
   Node的URL构造器不识别Nuxt的~/别名，导致证书路径解析失败，服务器无法加载证书。改为基于项目根目录的路径即可，两种实现方式：

   • 用process.cwd()拼接绝对路径，直接指向项目根目录
   • 用相对路径（nuxt.config.ts在项目根目录，直接写./certs/xxx即可）

2. 调整配置结构
   Nuxt 3的开发服务器配置必须放在nitro节点下，确保配置能被底层Nitro服务器识别加载。

正确配置示例 #

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
    css: ["~/assets/global.scss"],
    experimental: {
        reactivityTransform: true,
    },
    app: {
        head: {
            htmlAttrs: {
                lang: "en",
            },
        },
    },
    nitro: {
        devServer: {
            https: {
                // 方式一：process.cwd()拼接绝对路径
                key: `${process.cwd()}/certs/localhost-key.pem`,
                cert: `${process.cwd()}/certs/localhost.pem`,
                // 方式二：相对路径（更简洁）
                // key: './certs/localhost-key.pem',
                // cert: './certs/localhost.pem'
            }
        }
    }
})

额外检查项 #

• 确认certs文件夹位于项目根目录，且localhost-key.pem和localhost.pem文件存在
• 确保已执行mkcert -install安装根证书
• 重启Nuxt开发服务器，使新配置生效

完成以上操作后，访问https://localhost:3000即可正常加载。

内容的提问来源于stack exchange，提问作者aerowei