Vue CLI 2.x本地開啟https執行並代理後端https介面

1.本地生成證照

# 進入專案並在build下新建cert目錄
cd ./your-projuct/build && mkdir cert

# 進入cert目錄
cd cert

# 使用openssl生成私鑰
openssl genrsa -out private.key 1024

# 使用上面生成的私鑰生成證照 其中的Common Name輸入後端介面的host
openssl req -new -key private.key -out csr.key

# 生成證照籤名檔案
openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt

（在第四步生成的私鑰生成證照時，其中的Common Name配置輸入後端介面的host）

2.修改本地啟動專案的配置檔案

app.js 或者 ./build/dev-server.js，這裡擷取部分改動程式碼

const opn = require('opn');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware’);
const webpackConfig = require('./webpack.dev.conf');

const app = express();
const compiler = webpack(webpackConfig);
.
.
.
// 新增部分
const fs = require('fs');
const https = require('https’);

const privateKey = fs.readFileSync(path.join(__dirname, './cert/private.key'),'utf8');
const certificate = fs.readFileSync(path.join(__dirname, './cert/file.crt'),'utf8');
const credentials = { key: privateKey, cert: certificate };
const server = https.createServer(credentials, app);

server.listen(port);

3.重啟專案

3.1 問題：Chrome瀏覽器無法處理雜亂憑據，無法訪問https localhost url

解決：點選頁面任意處，直接使用鍵盤輸入 thisisunsafe 後回車即可正常訪問

3.2 問題：無法訪問後端介面，報錯DEPTH_ZERO_SELF_SIGNED_CERT

解決：需要在proxyTable的每個物件中增加secure:false

// 每個物件中增加secure:false
const proxyHost = 'https://www.your-domain.com';
const proxyTable = {
    '/YOURKEYWORD': {
    target: proxyHost,
    changeOrigin: true,
    secure: false
}