使用https运行sveltekit-dev

Question

在开发环境中，是否可以使用https运行SvelteKit应用程序？我试着运行

npm run dev -- --https  

并且vite成功启动服务器：

VITE v3.0.2  ready in 359 ms
➜  Local:   https://localhost:5173/
➜  Network: [...] 

但我无法连接https://localhost:5173chrome表示：ERR_SSL_VERSION_OR_CIPHER_MISMATCH

我还尝试编辑vite.config.js添加我的证书：

https: {
key: readFileSync( `${__dirname}/../server/key.pem`),
cert: readFileSync(`${__dirname}/../server/cert.pem`),
}

在这篇文章之后，我还尝试使用mkcert((：

本地主机上的Vite https

但它会导致相同的错误

然后我尝试使用mkcert作为插件：

const config = {

server: {       
https: true
},
plugins: [sveltekit(), mkcert()],
}; 

这一次，在第一次加载时，它似乎可以工作，但使用SveltKit goto((加载其他页面会导致以下不同的错误：

TypeError [ERR_HTTP2_INVALID_CONNECTION_HEADERS]: HTTP/1 Connection specific headers are forbidden: "keep-alive"

Answer 1

证书部分

为了简单起见，我建议您使用mkcert，但也可以使用openssl生成证书。。。

安装mkcert

brew install mkcert

安装本地证书颁发机构

> mkcert -install
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

使用mkcert创建证书

mkdir your_project/cert
cd your_project/cert
mkcert -key-file key.pem -cert-file cert.pem localhost

Vite部分

更新vite.config.js以包含您的证书文件

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
plugins: [sveltekit()],
server: {
https: {
key: fs.readFileSync(`${__dirname}/cert/key.pem`),
cert: fs.readFileSync(`${__dirname}/cert/cert.pem`)
}
}
});

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
plugins: [sveltekit()],
server: {
https: {
key: fs.readFileSync(`${__dirname}/../cert/key.pem`),
cert: fs.readFileSync(`${__dirname}/../cert/cert.pem`)
},
proxy: {}
}
});

那么您应该运行pnpm run dev并在终端中看到Local: https://localhost:5173/。

Answer 2

我注意到向vite.config.js添加：proxy:｛｝解决了这个问题，但我不完全理解选择的原因和后果

const config = {

server: {       
https: true,
proxy: {} <==
},
plugins: [sveltekit(), mkcert()],
};