如果不想在世界上虚度一生，那就学习一辈子。------高尔基

假设你在项目根目录下，新建一个 certs 文件夹，用于存放生成的证书：

|---------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | hljs bash # 进入项目根目录 cd your-vue-project # 新建一个存放证书的目录 mkdir certs cd certs # 1) 生成私钥 server.key openssl genrsa -out server.key 2048 # 2) 生成证书签名请求 server.csr（过程中会要求填写一些信息，可直接回车） openssl req -new -key server.key -out server.csr # 3) 使用 server.key 自签 server.csr，生成自签名证书 server.crt，设定有效期 365 天 openssl x509 -req -in server.csr -signkey server.key -out server.crt -days 365 |

执行完后，certs 目录下会有：

• server.key：私钥
• server.crt：自签名证书
• server.csr：证书签名请求文件（可删除或留存都行）

完整的bash

|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | hljs bash The default interactive shell is now zsh. To update your account to use zsh, please run `chsh -s /bin/zsh`. For more details, please visit https://support.apple.com/kb/HT208050. (base) GithubIireAchao:voice-chat achao$ mkdir certs (base) GithubIireAchao:voice-chat achao$ cd certs (base) GithubIireAchao:certs achao$ openssl genrsa -out server.key 2048 (base) GithubIireAchao:certs achao$ openssl req -new -key server.key -out server.csr You are about to be asked to enter information that will be incorporated into your certificate request. What you are about to enter is what is called a Distinguished Name or a DN. There are quite a few fields but you can leave some blank For some fields there will be a default value, If you enter '.', the field will be left blank. ----- Country Name (2 letter code) [AU]: State or Province Name (full name) [Some-State]: Locality Name (eg, city) []: Organization Name (eg, company) [Internet Widgits Pty Ltd]: Organizational Unit Name (eg, section) []: Common Name (e.g. server FQDN or YOUR name) []: Email Address []: Please enter the following 'extra' attributes to be sent with your certificate request A challenge password []: An optional company name []: (base) GithubIireAchao:certs achao$ (base) GithubIireAchao:certs achao$ openssl x509 -req -in server.csr -signkey server.key -out server.crt -days 365 Certificate request self-signature ok subject=C = AU, ST = Some-State, O = Internet Widgits Pty Ltd (base) GithubIireAchao:certs achao$ |

然后配置vite.config.js：

|------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | hljs javascript import {fileURLToPath, URL} from 'node:url' import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' import fs from 'fs' import path from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), vueDevTools(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, }, server: { host: '0.0.0.0', port: 3000, https: { key: fs.readFileSync(path.resolve(__dirname, 'certs/server.key')), cert: fs.readFileSync(path.resolve(__dirname, 'certs/server.crt')), }, }, }) |