https接続【Vue.js】

Vue-CLIを使ったhttps接続です。

build/webpack.dev.conf.jsを編集します。
見やすさのために一部を抜粋し、追加する2行についてコメントを記載しています。

'use strict'
const utils = require('./utils')
...

const fs = require("fs")    // 追加。ファイル読み書きのモジュール

const HOST = process.env.HOST
...
    port: PORT || config.dev.port,
    
    https: {key: fs.readFileSync(`<server.keyのパス>`), cert: fs.readFileSync(`<server.crtのパス>`)},    // 追加。httpsの設定。keyとcert（証明書）の設定を記載せず、trueとすることも可能。その場合はkeyと証明書を指定できない。

    open: config.dev.autoOpenBrowser,
    ...

上記を保存し、package.jsonのscripts "start"に定めた命令をコマンドで実行すると、
config/index.jsに定義したhostとportにしたがって、httpsのアドレスをブラウザから入力すれば、httpsによる接続が可能になります。