Window系统下Vite服务使用https运行Window-Vite服务使用https 实现思路使用mkcert生成

Window-Vite服务使用https

项目在开发阶段最好和线上环境进行同步，那么之后上线出的问题就能够及时避免，那么https也是其中绕不过的一道坎，让我们看看在开发阶段怎么使用https协议。下面例子使用了vite，其他服务也可以用这个做法

实现思路

1. 使用mkcert生成证书
1. 使用vite的配置项引入证书

使用mkcert生成证书

1. 下载exe文件

windows下可以使用mkcert的exe作为命令，exe下载地址为:[mkcert下载地址]:(github.com/FiloSottile…)
下载里面的mkcert-v1.4.4-windows-amd64.exe

2. 生成证书

在exe文件所在文件夹中输入以下命令

mkcert-v1.4.4-windows-amd64.exe 127.0.0.1

此时，在当前目录下会生成两个pem文件。

127.0.0.1.pem
127.0.0.1-key.pem 将这两个文件移入到vite项目中，随便找个地方放置，我放在public文件夹中

启用vite的https服务

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

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