本地项目如何设置https——2024-04-19

有个抽抽

已于 2024-04-19 17:06:31 修改

阅读量1k

点赞数 4

分类专栏：学习碎片文章标签： https vue.js

于 2024-04-19 17:04:28 首次发布

本文链接：https://blog.csdn.net/m0_51400566/article/details/137970844

版权

学习碎片专栏收录该内容

47 篇文章 0 订阅

订阅专栏

问题：由于项目引用了html5-qrcode插件，但是该插件在本地移动端调试时只能使用https访问，所有原本的本地地址是http，就需要改成https以方便调试。

解决方法：使用本地https证书

1）从项目文件下打开cmd逐步输入如下命令

npm install -g mkcert

mkcert create-ca

mkcert create-cert

2）完成以上步骤后，项目根目录会生成4个文件，如下

3）打开项目文件夹双击ca.crt 文件

安装证书-确定-当前用户-下一步-将所有证书都放入下列存储（P）-浏览-受信任的根证书颁发机构-确定

4）在项目vue.config.js里添加如下代码

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'))
    }
  },
};