前言
-
很多在线上的网站都是https连接,加密连接,是因为他购买了ssl证书,在Nginx配置了https。
-
之前我们在文章讲过,本地环境下vue.config.js就相当于线上的Nginx配置文件,在本地也可以配置。
-
为什么在本地环境要配置https了,因为像摄像头SDK和等等东西都是在https环境中运行。
-
webpack,devserve搭建本地https开发环境,有2个问题需要解决,一个是域名,一个是证书。
实际使用
1.域名
其实计算机本身是有域名访问的,就像我们启动一个本地项目是127.0.0.1/localhost,这其实是默认值
windows系统:C:\WINDOWS\system32\drivers\etc 文件下hosts 文件添加一个你想用的随意域名
linux系统:hosts文件位置:/etc/hosts
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
# 默认值
127.0.0.1 activate.navicat.com
# 更改成域名访问
127.0.0.1 www.qinxuehai.com
4注意:要在vue.config.js下devServer加上一句跳过检查,不然访问不了还会报错304,记得重启
disableHostCheck: true,
参考文章
2.证书
我们可以通过powershell下载免费的证书,这样我们就可以域名+证书在vue.config.js配置https
1.先在我们随便一个盘建一个文件夹取名,我是在E盘建了一个zs文件夹
2.电脑win+R 打开快捷命令行输入powershell
3.通过cmd命令到这个文件夹
E: //到E盘
cd zs // 到D盘这个文件夹
4.下载证书 证书我们使用mkcert签发。
// 回车即可
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’))
// 安装mkcert
choco install mkcert
// 使用mkcert生成根证书
mkcert -install
// 生成你的证书,就是你在上面设置的域名 我设置的是www.qinxuehai.com
mkcert qinxuehai.com
5.来到vue.config.js devServer下配置 注意: fs是node服务 需要定义 path本来就有
// 最上面
const fs = require(‘fs’)
本来就有
// const path = require(‘path’)
devServer: {
port: port,
open: true,
// 上面设置过防止304 访问不了
disableHostCheck: true,
// 域名设置
host: 'www.qinxuehai.com',
// https设置 E:/zs/www.qinxuehai.com-key.pem不能乱写是你上面下载证书路径跟你设置域名对应
https: {
key: fs.readFileSync(
path.resolve(__dirname, 'E:/zs/www.qinxuehai.com-key.pem')
),
cert: fs.readFileSync(
path.resolve(__dirname, 'E:/zs/www.qinxuehai.com.pem')
)
},
overlay: {
warnings: false,
errors: true
},
// 跨域主页文章有
proxy: {
'/api': {
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
注意:fs要在最上面设置,path本来就有,disableHostCheck: true,上面设置过,E:/zs/www.qinxuehai.com-key.pem不能乱写是你上面下载证书路径跟你设置域名对应,到这里就设置完了,重新启动。
细节:到这里就已经完成本地环境设置https,如果本地有websocket尽量先注释掉,要不然登录可能会出错
因为HTTPS是基于SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密,所以在HTTPS站点调用某些非SSL验证的资源时浏览器可能会阻止。比如使用ws://调用websocket服务器或者引入类似http://*.js的js文件等都会报错,当使用ws://连接websocket服务器时会出现类似如上的错误。
总结:
经过这一趟流程下来相信你也对 Vue 本地环境 http改成https测试 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!文章来源:https://www.toymoban.com/news/detail-498315.html
什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-498315.html
到了这里,关于Vue 本地环境 http改成https测试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!