本地项目如何设置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'))
    }
  },
};
相关推荐
2501_9159214325 分钟前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
岁月宁静1 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
古夕2 小时前
基于 Vue 3 + Monorepo + 微前端的中后台前端项目框架全景解析
前端·javascript·vue.js
一 乐3 小时前
宠物管理|宠物店管理|基于SSM+vue的宠物店管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·宠物
咖啡の猫3 小时前
Vue插件
前端·javascript·vue.js
咖啡の猫4 小时前
Vue中的自定义事件
前端·javascript·vue.js
xiaohe06014 小时前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
2301_801252224 小时前
Vue中的指令
前端·javascript·vue.js
咖啡の猫6 小时前
Vue全局事件总线
前端·javascript·vue.js
白水清风6 小时前
Vue3之渲染器
前端·vue.js·面试