Vue-CLI 使用 HTTPS 开发测试

现在越来越多的 HTML5 API 要求 https 才能使用，比如 Geolocation. 虽然电脑上允许 localhost 在 http 时调用，但是很多时候，我们是为了移动设备开发，需要在手机上测试，常常用手机通过 ip 地址去访问电脑，于是就杯具的无法调用。以下仅针对 vue-cli 提一些简单的解决方案。

证书

可以自己生成一个凑合用。没有 openssl 的话，需要先装一个。

openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem

方法一：nginx 反向代理（推荐）

nginx反向代理的好处是，顺便可以把 api 一起给代理了，解决了跨域问题。
假设你没改 vue-cli dev server的端口，然后有个 api 部署在 8081. 那么可以如下配置 nginx.

server {
        listen       443 ssl;
        server_name  localhost;

        ssl_certificate      path to cert.pem;
        ssl_certificate_key  path to key.pem;

        location / {
            proxy_pass http://127.0.0.1:8080;
        }
        location /api {
            proxy_pass http://127.0.0.1:8081;
        }
}

方法二：直接改 vue-cli 的 dev server 配置

修改 build/dev-server.js

在顶部

const https = require('https')
const fs = require('fs')

在 module.exports 的上方

app.listen = function () {
  var pkey = fs.readFileSync('path to key.pem', 'utf8')
  var pcert = fs.readFileSync('path to cert.pem', 'utf8')
  var options = {
    key: pkey,
    cert: pcert
  }
  var server = https.createServer(options, this)
  return server.listen.apply(server, arguments)
}