本地项目如何设置https——2024-04-19

问题:由于项目引用了html5-qrcode插件,但是该插件在本地移动端调试时只能使用https访问,所有原本的本地地址是http,就需要改成https以方便调试。

解决方法:使用本地https证书

1)从项目文件下打开cmd逐步输入如下命令

bash 复制代码
npm install -g mkcert
bash 复制代码
mkcert create-ca
bash 复制代码
mkcert create-cert

2)完成以上步骤后,项目根目录会生成4个文件,如下

3)打开项目文件夹双击ca.crt 文件

安装证书-确定-当前用户-下一步-将所有证书都放入下列存储(P)-浏览-受信任的根证书颁发机构-确定

4)在项目vue.config.js里添加如下代码

javascript 复制代码
const fs = require('fs');
const path = require('path');
module.exports = {
  devServer: {
    open: true, // 启动后打开浏览器
    https: {
      cert: fs.readFileSync(path.join(__dirname, './cert.crt')),
      key: fs.readFileSync(path.join(__dirname, './cert.key'))
    }
  },
};
相关推荐
司徒小夜7 小时前
HTTP与HTTPS杂谈-HTTPS防御了什么
网络·http·https
拉不动的猪7 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
java水泥工9 小时前
校园管理系统|基于SpringBoot和Vue的校园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
正义的大古11 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
一只游鱼11 小时前
利用keytool实现https协议(生成自签名证书)
网络协议·http·https·keytool
子兮曰13 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
kk不中嘞15 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
吐个泡泡v15 小时前
网络编程基础:一文搞懂 Socket、HTTP、HTTPS、TCP/IP、SSL 的关系
网络·网络协议·http·https·socket·ssl·tcp
影子信息16 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js