Nuxt3 本地 Https 🔒 | 告别烦人警告✨ | 保姆级教程来了喂！

Hello 各位 Coding 姐妹们！💃

还在被 Nuxt3 本地开发的 http:// 搞疯吗？🤯 那个红彤彤的 "Mixed Content" 警告是不是眼睛都要看瞎了？😫 更别提有些傲娇的后端接口，非 https:// 不给调，简直让人头秃！😩

别慌张！今天就给姐妹们掏出一个压箱底的宝贝教程，用 mkcert 这个小可爱，轻松给你的本地 Nuxt3 项目穿上 Https 的“安全小马甲”！🔒 告别裸奔，做精致的开发姐妹！💅

你是不是也遇到过这些痛点？👇

• 😠 API 接口只认 Https，Http 被无情拒绝！
• 😭 浏览器控制台天天飘红 Mixed Content 警告！
• 🤔 想提前模拟线上 Https 环境，心里没底？

别怕！解决方案这就奉上！👇

✨ 第一步：请个“魔法小助手”！✨

打开你的项目终端，敲下这行咒语，把 vite-plugin-mkcert 这个小助手请回家：

Bash

npm install --save-dev vite-plugin-mkcert
# or yarn add --dev vite-plugin-mkcert
# or pnpm add --save-dev vite-plugin-mkcert
# (选你常用的那个就好啦~)

🪄 第二步：念“咒语”（配置 nuxt.config.ts）🪄

找到项目里的 nuxt.config.ts 文件，把下面的魔法代码 ✨ 复制粘贴进去（我已经帮你清理掉无关的部分啦~）：

TypeScript

// nuxt.config.ts
import mkcert from 'vite-plugin-mkcert'; // 引入魔法小助手 ✨
import os from 'os'; // 需要知道你的“家”在哪 🏠 (home 目录)

export default defineNuxtConfig({
  // --- 其他配置省略哈 ---

  // Vite 配置（Nuxt 小弟）
  vite: {
    plugins: [
      mkcert({ hosts: ['localhost', '127.0.0.1'] }) // 让小助手给 localhost 发个“本地通行证” 📜
    ],
  },

  // 开发服务器配置（重头戏！）
  devServer: {
    https: {
      // “通行证”存放地址 👇 (小助手默认会放这，一般不用改)
      cert: os.homedir() + '/.vite-plugin-mkcert/certs/dev.pem',
      key: os.homedir() + '/.vite-plugin-mkcert/certs/dev.key',
    },
    host: 'localhost', // 保持这个就好
    port: 3000,        // 你喜欢的端口号 💖
  },

  // --- 其他配置继续省略 ---
});

代码小解读 (｡･ω･｡)ﾉ♡：

1. import mkcert & os: 请来小助手，并找到你电脑的用户主目录。
2. vite.plugins: 告诉 Vite：“快用 mkcert！”，它会自动生成证书放好。
3. devServer.https: 对 Nuxt 说：“我们要 Https！证书和钥匙在这俩路径，快用起来！”

🚀 第三步：启动！见证奇迹！🚀

保存好你的 nuxt.config.ts，然后自信地敲下启动命令：

Bash

npm run dev
# or yarn dev / pnpm dev

现在！打开你的浏览器，重点来了，地址栏输入：https://localhost:3000 (⚠️ 看清楚！是 https 哦！)

💡 温馨提示 Time：💡

• 第一次访问，浏览器可能会“大惊小怪”地弹个警告 🧐，因为它还不认识这个本地证书。
• 别慌！一般点“高级” -> “继续前往 localhost (不安全)” 就好啦 👌。vite-plugin-mkcert 很贴心，通常会自动帮你把本地 CA 设置成受信任的，后面就不会烦你了。
• 当当当当！✨ 看到地址栏那个让你安全感满满的 小锁头 🔒 了吗？恭喜你！成功上岸！🎉

---

好啦！今天的保姆级教程就到这里！告别 http "裸奔"，拥抱安全小锁头！本地开发瞬间丝般顺滑～ 💃 再也不怕被后端小哥 / 浏览器大大 PUA 了！😎

集霸们，赶紧马住试试看！真的超简单！👍

#尝试用小红薯风格写文章