方式一:利用http-server启用https
第一步:下载openssl
参考:windows安装OpenSSL
mac电脑自行询问搜索引擎
- 主要用与生成证书,也可以通过其他方式生成证书
第二步:下载http-server
npm install --global http-server
第三步:利用生成证书
- 建议在项目根目录下生成证书
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
第四步:启动https服务
http-server -S -C cert.pem -o
方式二:VScode中利用Live Server启用https服务
第一步:下载Live Server扩展
第二步:利用openssl生成证书
- 需要先下载openssl,下载教程参考上一种方式
- 建议在项目根目录生成证书
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
第三步:在项目根目录下配置
- 新建.vscode文件夹(注意有一个 .),在文件夹下新建settings.json文件
- 编写配置信息
{
"liveServer.settings.https": {
"enable": true,
"cert": "..\cert.pem", // 证书路径
"key": "..\key.pem", // 证书路径
"passphrase": "" //是私钥的密码,设为空
}
}
第四步:运行Live Server
方式三:webpack项目中启用https服务
修改配置文件(vue项目中是:vue.config.js)
- 如果需要自定义证书,参考webpack官方文档配置:DevServer | webpack
module.exports = {
//...
devServer: {
server: 'https'
},
};
方式四:vite中启用https服务
修改配置文件
- 如果需要自定义证书,参考vite官方文档配置: Vite | server
export default defineConfig({
//...
server: {
https: true,
},
})
方式五:uniapp启用https服务
在manifest.json中配置
- 官方文档:uni-app官网 H5 | server
- 如果需要自定义证书:vue2 参考webpack官网,vue3参考vite配置
{
"h5" : {
"devServer": {
"https": true
}
}
}
浏览器访问不安全的问题
- 以上方式,未自定证书,或者使用openssl生成的证书,在浏览器访问时会出现不安全的问题,但还是可以访问的。
- 解决方案可以参考:blog.csdn.net/Coding13/ar…