在实际开发中遇到了这样的情况，公司的开发机是远程的linux机器，所有项目开发都需要通过下发的windows电脑上安装 vsocde 的 remote-ssh 工具远程连接至开发机，然后在对应的项目中开启 devServer。 最后windows 电脑上通过修改hosts文件，将域名映射到对应的服务器上的 devServer 暴漏的端口进行实时预览，方便开发和调试。例如 http://dev.xxxx.com:5173 这样即可访问。

但后端后面升级了服务，所有的 cookie 下发时都设置了secure，这样前端在开发时就就必须要为devServer配置https。前端使用的 vite ，所以直接使用 vite-plugin-mkcert 插件即可。但是需要注意，这个插件的默认配置是给localhost这个域名下发的证书，在使用时需要指定为当前服务的域名，也就是*.xxxx.com，具体配置如下：

js
import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true
  },
  plugins: [mkcert({
     hosts: ['*.xxxx.com']
  })]
})

这样配置后，使用类似 npm run dev等一些命令启动devServer时，mkcert 会自动为当前域名创建https证书，证书相关的所有文件默认都在 ~/.vite-plugin-mkcert 目录下。

先在远程开发机上找到 ~/.vite-plugin-mkcert/rootCA.pem 文件，然后将该文件下载到本地电脑(公司的win本)上 然后在本地机器上(这里是公司发的windows笔记本)按 Win + R ，输入 certmgr.msc（当前用户证书）回车后会打开证书管理器。 在左侧导航栏中，展开 ​​“受信任的根证书颁发机构”​。 右键点击 ​​“证书”​ → ​​“所有任务”​ → ​​“导入”​。 在向导中选择你的 rootCA.pem 文件，按提示完成导入。 最后浏览器强制刷新当前服务对应的页面即可。

其实总结起来一句话，由于devServer并不在本地电脑上启动，所以mkcert创建的证书不能直接被本地电脑信任。所以需要将开发机上的根证书导入并信任，这样本地电脑访问域名就不会报错：当前网站的https不安全。提高了开发体验和效率。