如何将本地项目运行起来可以https访问

作为前端开发，某些时候需要调试一些https环境下的情况，大部分测试服务器域名是没有配置https的，所以我们需要自己本地启动https服务。
以下是直接使用mkcert工具进行安装，还有一种是使用Chocolatey的方式先安装choco再安装mkcert的方式，可参考这个链接

1、下载mkcert工具

官方文档：https://github.com/FiloSottile/mkcert#mkcert

参考文章链接：本地https快速解决方案——mkcert

mkcert工具下载链接：https://github.com/FiloSottile/mkcert/releases

mkcert 是一个简单的工具，用于制作本地信任的开发证书。不需要配置。

以管理员身份运行命令提示符cmd（注意这里不是powershell，是找到C:\Windows\System32\cmd.exe程序 右键以管理员方式运行）

2、mkcert的安装及使用指南

1、将CA证书加入本地可信CA，使用此命令，就能帮助我们将mkcert使用的根证书加入了本地可信CA中，以后由该CA签发的证书在本地都是可信的。
（1）mkcert-v1.4.4-windows-arm64.exe -install
安装证书并信任

（2）输入mkcert-v1.4.4-windows-amd64.exe -CAROOT命令，列出CA证书的存放路径

3、生成SSL自签证书

（1）签发本地访问的证书
直接跟多个要签发的域名或ip，比如签发一个仅本机访问的证书(可以通过127.0.0.1和localhost，以及ipv6地址::1访问)

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1

（2）使用本地IP地址生成证书

mkcert-v1.4.4-windows-amd64.exe 10.192.133.189

生成的证书就会在当前目录下

其中以.pem结尾的为公钥，以-key.pem结尾的为私钥
以上参考链接：https://blog.youkuaiyun.com/qq_45392321/article/details/117780286

4、在项目中使用

vue项目中的使用

import { fileURLToPath, URL } from 'url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import styleImport, { VantResolve } from 'vite-plugin-style-import';
const fs = require('fs');
const path = require('path')

// https: {
//   // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
//   cert: fs.readFileSync(path.join( 'C:/Windows/System32/localhost+1.pem')),
//   key: fs.readFileSync(path.join( 'C:/Windows/System32/localhost+1-key.pem'))
// },
// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  base: '/h5',
  plugins: [vue(), vueJsx(), styleImport({
    resolves: [VantResolve()],
  }),],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    open: true,
    host: '0.0.0.0',
    // https: {
    //   // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
    //   cert: fs.readFileSync(path.join('C:/Windows/System32/localhost+1.pem')),
    //   key: fs.readFileSync(path.join('C:/Windows/System32/localhost+1-key.pem'))
    // },
    proxy: {
      '/api': {
        target: loadEnv(mode, process.cwd()).VITE_PROXY_TARGET,
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, loadEnv(mode, process.cwd()).VITE_PATH_REWRITE)
      }
    }
  },
  define: {
    'process.env': {}
  }
})

在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