Vue | UniApp - 本地开启https-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue | UniApp - 本地开启https。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

此方法以webpack为示例，vite配置方法可能不同，但该教程有效解决https访问项目。

1.问题描述

在开发IM功能的时候有一个录音的功能，在网页端录音只可以在 localhost|https协议 下进行正常使用，在电脑上调试的时候可以使用localhost进行访问项目。

但是在手机端，你只能通过局域网IP或者内网穿透，在这里我选择的是内网穿透，因为这样的话不受局域网的限制。

在开通隧道时选择的是TCP连接，映射到本地项目地址，然后穿透工具会提供一个域名，可以在公网进行访问。

但是此时就有一个问题，如果你的本地项目地址无法使用https访问，那么穿透工具提供的域名也就无法使用https进行访问，所以接下来我们只需要解决为localhost可以使用https访问就可以了。

2.开启https

我们只需要在 vue.config.js 中进行一个配置即可。

module.exports = {
    devServer: {
        disableHostCheck: true, //内网穿透时需要将属性设置成true, 否则无法正常查看 | 不内网穿透时也不影响正常访问
        https: true, //开启https访问
    }
}

3.创建https自签证书

此时我们可以通过 https 来访问项目了，但是在访问的时候，肯定会提示该连接不是一个安全的，接下来我们可以自己生成一个ssl证书解决这个问题。

首先我们需要安装 Chocolatey，它是一个包管理器，类似于Npm。以下命令请使用管路员cmd进行运行安装。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

然后就可以通过 Chocolatey 安装 mkcert 了，mkcert 是生成ssl证书的工具。

choco install mkcert

然后通过 mkcert 创建本地CA(证书颁发机构)，以后由mkcert创建的证书就都是可信任的了。

mkcert -install

然后通过cmd切换到项目目录，接着就可以创建项目的ssl了。

// mkcert后面是本地对应的域名，多个地址用空格隔开 | ::1是IPV6的本地地址 | 这里也可以写上穿透提供的域名
mkcert 127.0.0.1 localhost ::1

然后重新配置 vue.config.js 文件

const fs = require('fs');

module.exports = {
    devServer: {
        host: 'localhost', //避免 sockjs-node net::ERR_CERT_COMMON_NAME_INVALID 错误
        disableHostCheck: true, //内网穿透时需要将属性设置成true, 否则无法正常查看
        https: {
			// 需要设置绝对路径
            key: fs.readFileSync('项目目录绝对路径/localhost+3-key.pem'),
            cert: fs.readFileSync('项目目录绝对路径/localhost+3.pem')
        }
    }
}