react 将项目改为 https 启动方式

按照如下流程操作即可

安装 mkcert

mkcert简介

mkcert是一个使用go语言编写的生成本地自签证书的小程序，具有跨平台，使用简单，支持多域名，自动信任CA等一系列方便的特性可供本地开发时快速创建https环境使用。

安装方式也非常简单，由于go语言的静态编译和跨平台的特性，官方提供各平台预编译的版本，直接下载到本地，给可执行权限(Linux/Unix需要)就可以了。下载地址: https://github.com/FiloSottile/mkcert/releases/latest

此外，mkcert已经推送至Homebrew, MacPorts, Linuxbrew, Chocolatey, Scoop等包管理平台中，也可以直接借助对应的包管理平台安装。如:

brew install mkcert  # Homebrew/Linuxbrew
choco install mkcert  # Chocolatey

安装成功后，应该可以使用mkcert命令了:

PS C:\Users\abcfy\projects> mkcert
Using the local CA at "C:\Users\abcfy\AppData\Local\mkcert" ✨
Usage of mkcert:

        $ mkcert -install
        Install the local CA in the system trust store.

        $ mkcert example.org
        Generate "example.org.pem" and "example.org-key.pem".

        $ mkcert example.com myapp.dev localhost 127.0.0.1 ::1
        Generate "example.com+4.pem" and "example.com+4-key.pem".

        $ mkcert "*.example.it"
        Generate "_wildcard.example.it.pem" and "_wildcard.example.it-key.pem".

        $ mkcert -uninstall
        Uninstall the local CA (but do not delete it).

For more options, run "mkcert -help".

mkcert基本使用

从上面自带的帮助输出来看，mkcert已经给出了一个基本的工作流，规避了繁杂的openssl命令，几个简单的参数就可以生成一个本地可信的https证书了。更详细的用法直接看官方文档就好。

生成证书

打开命令行

将下载的证书文件拖到命令行中后面加上 -install 命令

 E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe -install

2.3 生成证书

将下载的证书文件拖到命令行中后面加上 localhost 127.0.0.1

E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1

在这里插入图片描述

此時得到的文件

拷贝证书到项目跟目录

在这里插入图片描述

将上面两个文件拷贝到 react 项目的根目录下
在这里插入图片描述

修改启动命令

在 package.json 文件的启动命令前加上如下代码

cross-env HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem

在这里插入图片描述

安装依赖包

需要先安装如下的包

 yarn add cross-env

再次启动项目即可

npm start

此时用户有可能会调到这个页面后项目就不动了
或者没有成功开启https

此时需要修改一下这里的ip 改成127.0.0.1 即可