前言
很多在线上的网站都是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测试 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕
好文推荐
您阅读本篇文章共花了：
发表评论