本地项目如何设置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'))
    }
  },
};
相关推荐
运维-大白同学24 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
木子_lishk1 小时前
gateway 支持同时使用 https 和 http访问
https·gateway
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5412 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.2 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普2 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King2 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑3 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1253 小时前
前端预览pdf文件流
前端·javascript·vue.js