本地项目如何设置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'))
    }
  },
};
相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
charlee446 小时前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
游戏开发爱好者88 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106328 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘10 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)11 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中11 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互