本地项目如何设置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'))
    }
  },
};
相关推荐
H5开发新纪元6 分钟前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong242 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh00014 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友4 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
86Eric5 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
Jewel1056 小时前
如何配置Telegram Mini-App?
前端·vue.js·app
前端大白话7 小时前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
BillKu7 小时前
Vue3父子组件数据同步方法
前端·javascript·vue.js
綦枫Maple8 小时前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
生命猿于运动8 小时前
Trae使用体验
前端·javascript·vue.js