Vue2 localhost开启 https

[lmislm]

目录：

1. 懒人版
2. 动手版

1. 懒人版

1. Clone this repository，Run the script，Add the root certificate，Set in vue.config.js Detail: https://github.com/dakshshah96/local-cert-generator

   补充设置，需要点击进去，设置Trust，勾选为Always trust，双击有error的图标

1. 进入 keychain，钥匙串访问，选择menu里的System

2. 勾选前

4. 勾选后

2. 动手版

https://medium.com/free-code-camp/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

--- 以下内容已经失效 ---

目录：

1. 生成本地证书.
2. vue 配置 https

1. 生成本地证书

检查是否安装 openssl

openssl version -a

% openssl version -a 
OpenSSL 3.1.2 1 Aug 2023 (Library: OpenSSL 3.1.2 1 Aug 2023)
built on: Tue Aug  1 13:36:55 2023 UTC
platform: darwin64-arm64-cc
options:  bn(64,64)
compiler: clang -fPIC -arch arm64 -O3 -Wall -DL_ENDIAN -DOPENSSL_PIC -D_REENTRANT -DOPENSSL_BUILDING_OPENSSL -DNDEBUG
OPENSSLDIR: "/opt/homebrew/etc/openssl@3"
ENGINESDIR: "/opt/homebrew/Cellar/openssl@3/3.1.2/lib/engines-3"
MODULESDIR: "/opt/homebrew/Cellar/openssl@3/3.1.2/lib/ossl-modules"
Seeding source: os-specific
CPUINFO: OPENSSL_armcap=0x87d

生成证书：

在dist/build目录下创建 cert 目录，依次执行下面的命令：

openssl genrsa -out private.key 2048

openssl req -new -key private.key -out csr.key

openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt

执行完成后，cert 目录下分别生成 private.key、csr.key、file.crt 三个文件。

2. vue 配置 https

const path = require('path')
const fs = require('fs')
module.exports = {
  devServer: {
    https: true,
    https: {
       key: fs.readFileSync(path.join(__dirname, './dist/cert/private.key')),
       cert: fs.readFileSync(path.join(__dirname, './dist/cert/file.crt')),
       ca: fs.readFileSync(path.join(__dirname, './dist/cert/file.crt'))
    }
  }
}