以下是如何在vite.config.ts中配置Vite以使用HTTPS：
1、安装HTTPS证书：
为了使用HTTPS，你需要有一个SSL证书。你可以使用自签名证书进行开发测试，但在生产环境中应使用由受信任的证书颁发机构签发的证书。
如果你只是想快速测试，可以使用OpenSSL生成一个自签名证书：
openssl req -x509 -newkey rsa:4096 -keyout localhost-key.pem -out localhost-cert.pem -days 365 -nodes -subj "/CN=localhost"
2、修改vite.config.ts配置文件：
在vite.config.ts文件中，你可以通过修改server配置项来启用HTTPS。下面是一个示例配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 引入fs模块来读取证书文件
import fs from 'fs';
import path from 'path';
export default defineConfig({
plugins: [vue()],
server: {
https: {
// 本地开发时使用自签名证书
key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem'))
},
host: 'localhost', // 开发服务器主机名
port: 3000, // 开发服务器端口号
open: true, // 在启动时自动打开浏览器
}
});
3、运行Vite服务器：
配置完成后，你可以通过运行Vite来启动你的项目：
vite
或者如果你使用的是npm脚本：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
然后运行：
npm run dev
这样，你的Vue 3项目就会在HTTPS模式下运行了。记得在生产环境中使用由受信任的CA签发的证书。对于开发和测试环境，使用自签名证书是可以的，但在部署到生产环境前，请确保更换为正式的SSL证书。