在本地主机上访问 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 }, // Not needed for Vite 5+
  plugins: [ mkcert() ]
})

当您运行本地 vite 开发服务器时，系统可能会第一次提示您输入密码。然后它会将本地证书安装到您的系统和许多已安装的浏览器上。

简单的！

Answer 2

Vite 文档建议使用他们的官方包：@vitejs/plugin-basic-ssl

\n

文档： https: //vitejs.dev/config/server-options.html#server-https

\n

你需要安装它

\n

npm install -D @vitejs/plugin-basic-ssl\n

\n

然后在你的vite.config.ts：

\n

npm install -D @vitejs/plugin-basic-ssl\n

\n

\xe2\x9a\xa0\xef\xb8\x8f 这是用于您的开发环境，请勿在生产中使用它。您在生产中需要自己的证书（例如使用 nginx 和 let's encrypt）。

\n

Answer 3

也许问题在于密钥和证书文件。我正在使用具有相同选项的mkcert库，它对我来说效果很好。此外，无需手动信任证书。

您可以按照以下步骤操作：

# Step: 1
# Install mkcert tool - macOS; you can see the mkcert repo for details
brew install mkcert

# Step: 2
# Install nss (only needed if you use Firefox)
brew install nss

# Step: 3
# Setup mkcert on your machine (creates a CA)
mkcert -install

# Step: 4 (Final)
# at the project root directory run the following command
mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost'

并更新你vite.config.js的

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./.cert/key.pem'),
      cert: fs.readFileSync('./.cert/cert.pem'),
    },
  },
  plugins: [react()],
});

yarn dev上述步骤应该可以解决运行启动开发服务器时的 HTTPS 问题。

另外：我使用 npm 脚本来让我的团队成员轻松创建证书。

// in package.json
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",

    "cert": "rm -rf .cert && mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost'"

  },

Answer 4

Daniel Elkington 的上述回答在 macOS 上对我来说就像一个魅力。然而，对于 Docker 容器内的 Vue/Vite，它对我不起作用。

下面的这种方法对我有用（在 macOS 上和 Docker 容器内）：

让事情正常工作（通过重新）使用我使用 mkcert 为本地主机生成的密钥和证书文件，例如：

// vite.config.js
import { fileURLToPath, URL } from "node:url";

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
      key: '/path/to/some_folder/ssl/SSLforMyHosts-key.pem',
      cert: '/path/to/some_folder/ssl/SSLforMyHosts-certificate.pem',
    }
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

mkcert使用以下命令为 localhost（以及用于本地开发的更多测试域）生成密钥和证书文件：

cd /Users/your_name/some_folder/ssl
mkcert \
  -cert-file SSLforMyHosts-certificate.pem -key-file SSLforMyHosts-key.pem \
  localhost 127.0.0.1 ::1 \
  some-other-local-dev-site.localhost \
  example.localhost

另请参阅：有关安装自签名证书的回答。