window umi react项目使用mkcert自签名证书实现本地https访问

create-react-app 项目

create-react-app创建的项目，package.json如下

{
  "name": "creat-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "cross-env": "^7.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "cross-env HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

前提，安装mkcert

为localhost域名添加证书

1. mkcert -install
2. mkcert localhost

在power shell 所在目录下生成了

把生成的两个文件拷到项目根目录下，在启动命令前，加上以下命令

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

可以单独建个文件夹cert存放，然后配置.gitignore，代码提交时不提交这代码，这时路径可能是

SSL_CRT_FILE=./cert/localhost.pem

先安装 cross-env：yarn add cross-env

用localhost在谷歌浏览器访问

我们看一下证书

我们用ip访问试试

为localhost 和 ip地址 同时加上认证，

1. mkcert -install
2. mkcert localhost 192.168.0.101

把文件拷贝到项目根目录下，修改启动命令，操作同上

Umi项目

umi 创建的项目，package.json如下

{
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@umijs/preset-react": "1.x",
    "antd": "latest",
    "antd-mobile": "latest",
    "eslint": "^7.20.0",
    "rc-tween-one": "^2.7.3",
    "react-router": "^5.2.0",
    "umi": "^3.3.7"
  },
  "devDependencies": {
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@umijs/test": "^3.3.7",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.0",
    "react": "17.x",
    "react-dom": "17.x",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }
}

生成证书操作和上面一样，这时需要把生成第一个.pem文件（文件名不带-key那个），复制一份，把后缀改成.crt，放到项目根目录下

这里不用修改pakage.json文件了，改了也不起作用

这里要修改umi的配置文件，.umirc.ts或config.js


之前一直在改pakage.json文件，发现怎样改，证书都是这个，都没有用我生成的证书，也不知道该怎么换

我卡了两天，百度那些千篇一律的文章看了几遍，终于找到答案了

umi使用的配置式/插件式开发，把creat-react-app中的修改配置的操作简化了，但网上关于umi的配置的文档真是太少了，根本不知道怎么配，大家可以去webpack官网看看，至少这个问题是在那里得到了答案。
webpack配置

注意

在火狐浏览器下证书无法使用