如何在本地启用https服务?

方式一：利用http-server启用https

第一步：下载openssl

参考：windows安装OpenSSL

mac电脑自行询问搜索引擎

• 主要用与生成证书，也可以通过其他方式生成证书

第二步：下载http-server

npm install --global http-server

第三步：利用生成证书

• 建议在项目根目录下生成证书

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

第四步：启动https服务

http-server -S -C cert.pem -o

方式二：VScode中利用Live Server启用https服务

第一步：下载Live Server扩展

第二步：利用openssl生成证书

• 需要先下载openssl，下载教程参考上一种方式
• 建议在项目根目录生成证书

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

第三步：在项目根目录下配置

1. 新建.vscode文件夹（注意有一个 .），在文件夹下新建settings.json文件
2. 编写配置信息

{
  "liveServer.settings.https": {
    "enable": true, 
    "cert": "..\cert.pem", // 证书路径
    "key": "..\key.pem", // 证书路径
    "passphrase": "" //是私钥的密码，设为空
  }
}

第四步：运行Live Server

方式三：webpack项目中启用https服务

修改配置文件（vue项目中是：vue.config.js）

• 如果需要自定义证书，参考webpack官方文档配置：DevServer | webpack

module.exports = {
  //...
  devServer: {
    server: 'https'
  },
};

方式四：vite中启用https服务

修改配置文件

• 如果需要自定义证书，参考vite官方文档配置: Vite | server

export default defineConfig({
  //...
  server: {
    https: true,
  },
})

方式五：uniapp启用https服务

在manifest.json中配置

• 官方文档：uni-app官网 H5 | server
• 如果需要自定义证书：vue2 参考webpack官网，vue3参考vite配置

{
  "h5" : {
    "devServer": {
      "https": true
    }
  }
}

浏览器访问不安全的问题

• 以上方式，未自定证书，或者使用openssl生成的证书，在浏览器访问时会出现不安全的问题，但还是可以访问的。
• 解决方案可以参考：blog.csdn.net/Coding13/ar…