運行vuejs與SSL開發服務器（以通過HTTPS）

重要的細節&解決方法：我遇到這樣的：「Deprecating Powerful Features on Insecure Origins」運行vuejs與SSL開發服務器（以通過HTTPS）

這說明HTTPS外部主機強制執行。我的筆記本電腦上有我的開發環境，並且在週末我進入了這個盒子，這就是爲什麼我昨天遇到了這個問題。我在筆記本電腦上遠程運行vuejs開發服務器，使其聽取0.0.0.0並在我的桌面上打開該頁面。這會導致問題。

我試過使用SSH端口轉發到localhost。這工作，是一個可接受的解決方法對我來說。

原始問題仍然有效。我現在將把它打開。

我正在使用需要SSL（WebRTC）的JS API。所以要開發，我需要通過HTTPS運行開發服務器。我怎麼用vuejs做到這一點？

我已經使用webpack快速啓動了該項目。我發現了一些解釋如何通過SSL運行webpack-dev-server的鏈接，但我不知道如何使用vuejs應用程序來做到這一點。考慮到JavaScript的所有內容，我非常想要綠色環保。 webpack鏈接都提到了一個配置文件，但是我的項目中沒有這樣的文件。我看到的最接近的是「main.js」，但在那裏完全沒有配置。

從本質上說，我有什麼是以下步驟的結果：

mkdir demo 
cd demo 
npm install --save-dev vue-cli 
./node_modules/.bin/vue init vuetifyjs/webpack-advanced demo 

# Use the defaults here (except for "Vue build" I used "Runtime-only") 

cd demo 
npm install 
npm run dev # <-- This is the command I would like to use SSL in

來源

2017-10-21 exhuma

@exhumai嗨，我可以幫你爲節點警告後顯示。 JS，但爲什麼VUE.JS應該是不同的？ – 2017-10-21 16:16:14

我真的不知道。這幾乎是我想用JS這樣的開發Web服務器編寫的第一個應用程序。我還沒有使用過webpack。我覺得vuejs的開發流程很容易開始。除了我現在使用HTTPS問題 – exhuma

掙扎我只是把基於快遞FS和HTTPS基礎上通過所需的OpenSSL生成的密鑰添加certificat一個例子。問候。 – 2017-10-21 17:18:00

要求OpenSSL的安裝：

首先，我們必須基於由做了重點 SSL certificat openssl並且沒有密碼短語cos這將會生成一個錯誤。

nodejs https>node server.js _tls_common.js:87 c.context.setKey(options.key); ^Error: error:0907B068:PEM routines:PEM_READ_BIO_PRIVATEKEY:bad password read ...

轉到您的項目中開始創建關鍵& certificat：

openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365

-nodes : Don't encrypt the private keys at all.

安裝需要爲您的項目包：（--save添加到的package.json）

npm install express --save npm install https --save npm install fs --save

現在創建服務器文件：

touch server.js nano server.js

複製/粘貼：以server.js

var fs = require('fs'); var https = require('https'); var app = require('express')(); var options = { key : fs.readFileSync('key.pem'), cert : fs.readFileSync('cert.pem') }; app.get('/', function (req, res) { res.send('Hello World!'); }); https.createServer(options, app).listen(3000, function() { console.log('Started!'); });

在這種CAS我們不使用443端口，因爲已使用的服務，所以我使用的端口3000未使用任何應用程序...

來源

2017-10-21 17:17:02

但不使用vuejs服務器？我不太確定，我明白。我已經有類似使用uwsgi的東西了。但是這對'.vue'文件沒有幫助。 – exhuma

@exhuma如果你想我使用vuejs我需要你的一部分服務器。發表它。如果需要，我也需要requieremnt模塊。 – 2017-10-21 17:35:37

沒有什麼特別的帖子。你稍等一會兒。我將編輯原始問題以添加如何設置vue項目的示例（基本上提供了一個像我所擁有的文件樹）。 – exhuma

我不知道你是否仍然有這個問題，或者如果有其他人仍然遇到它，但我找到了解決方案。

按照上面的說明來生成你的工作文件夾中的OpenSSL的密鑰和證書。

在/node_modules/webpack-dev-server/bin/webpack-dev-server.js變化這一行從：

key: { 

    type: 'string', 

    describe: 'Path to a SSL key.', 

    group: SSL_GROUP 

    }, 

    cert: { 

    type: 'string', 

    describe: 'Path to a SSL certificate.', 

    group: SSL_GROUP 

    },

到：

key: { 

    type: 'string', 

    describe: fs.readFileSync('key.pem'), 

    group: SSL_GROUP 

    }, 

    cert: { 

    type: 'string', 

    describe: fs.readFileSync('cert.pem'), 

    group: SSL_GROUP 
    },

然後設置

argv.https = true;

這就是我要做的有我的代碼服務。

注意，命令行還是會讀http://localhost:8080，但是當你在瀏覽器中使用https，您的應用從瀏覽器

來源

2018-02-20 08:18:13

運行vuejs與SSL開發服務器（以通過HTTPS）

回答

相關問題