web-dev-qa-db-ja.com

httpsでVue.js dev serveを実行するには？

Vue-cliを使用して、vue webpackテンプレートを使用したプロジェクトを作成しています。npm run dev？

httpswebpackvue.js
21
Raed Alahmad

Webpackテンプレートは、開発用のサーバーとして express を使用します。交換するだけです

var server = app.listen(port)

build/dev-server.jsに次のコードを使用します。

var https = require('https');
var fs = require('fs');
var options = {
  key: fs.readFileSync('/* replace me with key file's location */'),
  cert: fs.readFileSync('/* replace me with cert file's location */'))
};
var server = https.createServer(options, app).listen(port);

Webpackテンプレートでは、 opn モジュールを使用して、http://localhost:8080がブラウザーで自動的に開かれることに注意してください。したがって、便宜上、var uri = 'http://localhost:' + portをvar uri = 'https://localhost:' + portに置き換えてください。

8
choasia

最新のvuejs（2018年5月7日現在）では、プロジェクトルートディレクトリに「vue.config.js」を追加する必要があります。

vue.config.js：

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    Host: '0.0.0.0',
    port: 8085, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

このファイルで、値を設定します：https：true

56
Jianwu Chen

/build/webpack.dev.conf.js、devWepackConfigのdevServerに、追加

https: true
13
Blauhirn

Jianwu Chenの答えは私を助けてくれましたが、拡張された答えを望んでいたコメントの人々を助けるために、私はこの答えを作成しています。役に立てば幸いです。

基本的には、「無効な証明書であることは知っていますが、サイトをローカルで開発しているので大丈夫です」ということをブラウザに伝えるにはどうすればいいですか。

一箇所で完全な答えをしようとすると、ここに行きます...

まず、vue.config.jsの内部に、必ず以下を含めます

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/example.com+5-key.pem'),
          cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        public: 'https://localhost:8080/'
    }
}

明らかに他のものを入れることができますが、主なことは、キーと証明書の子を持つhttpsを持っていることです。次に、証明書ファイルの場所を指定する必要があります。

単純にhttpsをtrueに設定する代わりに、キーと証明書を持つオブジェクトをhttpsに渡します。

vue cliこの特定の証明書とキーを使用することを伝えています。

証明書とキーを取得するにはどうすればよいですか？まあ、私たちはそれを作成しなければなりません。

幸い、これを簡単に行うツールがあります： https://mkcert.dev （現在は https://github.com/FiloSottile/mkcert を指します）

GitHubの指示に従ってインストールできます。私は個人的に最新リリースを入手しました： https://github.com/FiloSottile/mkcert/releases

次に、指示に従います。

mkcert -install

に続く：

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

これにより、ディレクトリにファイルが作成されます。

上記のvue.config.jsで参照されているソースフォルダー（つまり./cert）にファイルをコピーすると、準備完了です。必ず一致するようにファイル名を更新してください。

更新：また、設定に次の点があることに注意してください。

public: 'https://localhost:8080/'

コメントでこれを指摘してくれた@mcmimikに感謝します。その行がないと、彼が:: ERR_CONNECTION_REFUSEDについて言及したコンソールエラーが表示されます。この行をhttpsの兄弟としてdevServerに追加すると、そのエラーが抑制されます。この回答が気に入ったら、彼のコメントも気に入ってください！

3
Chad Carter

最も簡単な方法は、package.jsonに移動して、「dev」を

 "dev": "webpack-dev-server --inline --progress  --https --config build/webpack.dev.conf.js",

コンソールで http：// localhost で実行されているメッセージが引き続き表示されますが、 https：// localhost でサイトにアクセスできます

2
Dontreadonme