我试图让https在我的本地主机环境中为Vite工作。浏览器显示一个无效的证书错误。
我已经像这样设置了我的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-cert"。
作为临时解决方案，我在Chrome中启用了不安全的localhost (Chrome://flags/#allow-insecure-localhost)，这至少可以摆脱警告。
最简单的方法是使用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 dev服务器时，第一次可能会提示您输入密码。然后，它将在您的系统和许多已安装的浏览器上安装本地证书。
简单!
Vite文档建议使用他们的官方软件包:@vitejs/plugin-basic-ssl
文档:https://vitejs.dev/config/server-options.html server-https
你需要用
安装它npm install -D @vitejs/plugin-basic-ssl
然后在你的vite.config.ts中这样使用:
import basicSsl from '@vitejs/plugin-basic-ssl'
export default {
plugins: [
basicSsl()
]
}
⚠️这是用于开发环境的，不要在生产环境中使用。你需要在生产环境中使用你自己的证书(例如使用nginx和let's encrypt)。
也许问题出在密钥和证书文件上。我正在使用具有相同选项的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.jsimport { 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'"
},
Daniel Elkington上面的答案对我在macOS上很有吸引力。但是，对于Docker容器内的Vue/Vite，它不适合我。
下面的方法对我来说很有效(在macOS和Docker容器中):
有事情工作(重新)使用密钥和证书文件使用mkcert我为localhost生成,例如:
// 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为本地主机(以及用于本地开发的更多测试域)生成密钥和证书文件，使用以下命令:
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
请参见:关于安装自签名证书的答案。
作为另一种解决方案，本文中的答案解释了如何将CA和证书添加到服务器和浏览器:
关于您的虚拟服务器配置，请参阅虚拟服务器文档-服务器。Https，你只需要像这样:
server: {
https: true
}
或您可以在命令行中这样做:
vite --https
或
npm run dev -- --https
如果您已经使用mkcert创建了本地证书然后你可以使用以下配置:
vite.config.js(使用vue@3)
如果您打算复制代码，请记住更改证书文件名。
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import fs from 'fs';
// https://vitejs.dev/config/
export default defineConfig({
server: {
https: {
key: fs.readFileSync("../localhost+2-key.pem"),
cert: fs.readFileSync("../localhost+2.pem"),
ca: fs.readFileSync("../.local/share/mkcert/rootCA.pem")
},
port: 8080
},
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})