# 本地起vite 项目开启https支持

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1731482523471/cffc67ba-edf1-4483-9395-440ef440cd53.png align="center")

### 背景

做一个视频聊天工具，需要用浏览器打开摄像头和麦克风。chrome 要求打开摄像头和麦克风，需要开启https支持。

下载 `mkcert`

```bash
# 第一步，安装 mkcert
brew install mkcert
```

```bash
# 第二步，将 mkcert 添加到本地根CA
mkcert -install
```

```bash
# 第三步，生成签名和证书
# 当前目录下会多出两个文件，可以在项目根目录下运行
mkcert localhost
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1731482835118/8ddb4bfc-b6e5-44dc-aaa3-d306b31ab526.png align="center")

### 第四步

添加vite配置文件，没有这个文件的话自己创建

```javascript
import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
      key: './localhost-key.pem', // {{ edit_2 }}
      cert: './localhost.pem', // {{ edit_3 }}
    },
  },
  // plugins: [mkcert()],
});
```

### 其他

修改 dev script，使项目局域网内可访问

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1731483022460/375a6b6d-ab9e-4e02-b31a-2525487c280b.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1731483167051/f0863cee-59e7-4041-962b-b6fa9826bc31.png align="center")

```javascript
# 也可以生成你本地证书的ip
mkcert 10.3.0.38
```