> ## Content Index
> Fetch the complete content index at: https://iiong.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# macOS 建立 https 开发环境
- URL: https://iiong.com/macos-build-https-development-environment/
- Published: 2021-07-01T13:41:22.000Z
- Updated: 2026-06-22T15:29:35.000Z
- Description: 因为项目有环境开发要求，只能在 https 环境下开发，所以就有了本地 https 搭建的博文，实现起来也很简单。
- Author: 淮城一只猫
- Tags: 奇技淫巧

### 前言

因为项目有环境开发要求，只能在 `https` 环境下开发，所以就有了本地 https 搭建的博文，实现起来也很简单。

### 生成证书

如果需要本地证书并且让系统信任则需要自己生成，在 macOS 系统自带 `openssl` 命令，如果没有可以在 `brew` 包管理器下进行安装。

```bash
mkdir sslout
cd sslout
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

```

> 填入信息注意 `Common Name (eg, fully qualified host name) []:` 这个问题，填入信息应该是 绑定的域名 一致。

根据提示输入信息生成相关的证书，然后文件夹下生成俩个密钥文件，把其中的 `rootCA.pem` 文件拖进 `钥匙串访问` 应用中的 `系统` 菜单栏目里，并且在详细信任栏里选择 `始终信任`。

### ssl 证书

新建 `OpenSSL` 配置文件，这样在终端无需输入大量的个人信息，新建 `server.csr.cnf` 文件：

```bash
[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

```

新建 `v3.ext` 文件，创建 `x509 v3` 证书：

```bash
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

```

然后在终端输入命令生成 `server.key`：

```bash
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <(cat server.csr.cnf)

```

继续生成 `server.crt`：

```bash
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

```

这样你得到的 `ssl` 相关证书文件。

### 在 vue-cli 使用

`vue-cli` 实际上是 `webpack-dev-server` 配置项，配置起来也简单：

```javascript
devServer: {
  https: {
    key: fs.readFileSync('./ssl/server.key'),
    cert: fs.readFileSync('./ssl/server.crt'),
    ca: fs.readFileSync('./ssl/rootCA.pem')
  },
  disableHostCheck: true
}

```

只需要导入对应的证书即可。