ssl - 本地主机上的 Vite https

Question

我正在尝试让 https 在我的 Vite 本地主机环境中工作。 Chrome 显示无效证书错误。
我已经像这样设置了我的 vite.config.js 文件:

import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs';

export default defineConfig({
  resolve: { alias: { '@': '/src' } },
  plugins: [vue()],
  https: {
    key: fs.readFileSync('RootCA-key.pem'),
    cert: fs.readFileSync('RootCA.pem')
  }
})

当我运行 npm run dev -- --https它按预期工作，我没有从 Vite 得到任何问题。但是，Chrome 显示无效证书。
我使用 openssl 创建证书文件，它给了我 .crt、.pem 和 .key 文件。它们都不是二进制的，所以我将 .key 文件重命名为 RootCA-key.pem。我尝试使用 RootCA.pem 文件作为证书，并将 RootCA.crt 文件重命名为 RootCA-cert.pem 并将其用作证书。
作为临时解决方法，我在 Chrome (chrome://flags/#allow-insecure-localhost) 中启用了不安全的本地主机，这至少消除了警告。

Answer 1

最简单的方法是使用 vite-plugin-mkcert包裹。

npm i vite-plugin-mkcert -D

vite.config.js

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true },
  plugins: [ mkcert() ]
})

当您运行本地 vite 开发服务器时，可能会在第一次提示您输入密码。然后它将在您的系统上安装一个本地证书并安装到 a number of installed browsers。 .
简单的!