vue项目开启 https 访问模式

在实际开发中，我们会以https形式进行页面访问，但是根据vue-cli的版本不同，配置方式也有所差异，以下分别从vue-cli3.x和vue-cli2.x构建的项目分别进行配置开启https:

vue-cli3.x 项目：

使用vue脚手架3.x搭建的项目，配置开启https方法比较简单，在项目根目录下的vue.config.js文件中增加属性 https: true 即可。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'url',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // 此处开启 https
    https: true
  }
}

vue.config.js 配置参考文档：https://cli.vuejs.org/zh/config/#vue-config-js

vue-cli2.x 项目：

使用cli2.x搭建的项目开启https较为复杂，关键是openssl生成证书文件，如果本地没有证书，要先生成证书，以及修改项目中配置。

1.生成本地证书

若本地已经安装了git客户端，其中包括了openssl程序，可直接在项目文件目录打开git bash 界面，输入以下命令

① 在buid文件夹下新建 cert 文件夹，在cert目录下打开git bash输入以下命令生成私钥 .key 文件

openssl genrsa -out private.key 1024

② 通过上面生成的私钥文件生成CSR 证书签名，根据要求填写一些相关信息，可一路按回车即可

openssl req -new -key private.key -out csr.key

③ 根据上述私钥文件和csr证书签名文件生成证书文件

openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt

完成上述步骤后，cert目录下分别生成 private.key、csr.key、file.crt 三个文件。

2. 修改项目中配置

打开app.js增加以下代码：（若相关配置写在./build/dev-server.js中则在对应文件中修改）

const opn = require('opn')
const path = require('path') 
const express = require('express')
const app = express()
// ......
const https = require('https')
const fs = require('fs')

const privateKey = fs.readFileSync(path.join(__dirname, '../bulid/cert/private.key'), 'utf8')
const certificate = fs.readFileSync(path.join(__dirname, '../bulid/cert/file.crt'), 'utf8')
var credentials = {key: privateKey, cert: certificate}

// 开启 https服务
var server = https.createServer(credentials, app)
// ...
// app.listen(port) // 开启http
server.listen(port) // 开启https

---

总结，项目开发中开启https的方法有很多，但是因为大家的实际项目结构或者版本差异较大，可能不是适用所有，网上也有很多教程，毕竟也是一个个坑踩过来的，希望能帮助大家，如果有错误或者不清楚的地方，欢迎指出，大家一起学习进步！