Vue 本地环境 http改成https测试

前言

• 很多在线上的网站都是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测试 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕