本地项目如何设置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'))
    }
  },
};
相关推荐
闲蛋小超人笑嘻嘻16 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
焚 城16 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶17 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中17 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略17 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86817 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
LuckySusu20 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu20 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu20 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu20 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js