如何使用https运行Vue.js dev服务？

Question

我正在使用Vue-cli使用webpack模板创建vue项目.如何以https开发利用运行它npm run dev？

Answer 1

在最新的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

Answer 2

In /build/webpack.dev.conf.js,to devWepackConfigin devServer,add

https: true

Answer 3

如果您使用 vue ui 来为您的应用程序提供服务，一个简单的解决方案是替换

 "serve": "vue-cli-service serve",

和

 "serve": "vue-cli-service serve --https true",

在package.json您的项目文件中。

现在使用 vue ui 为您的应用程序提供服务。您可以进行更多更改。见https://cli.vuejs.org/guide/cli-service.html#using-the-binary

Answer 4

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模板中,http://localhost:8080将使用opn模块在浏览器中自动打开.因此var uri = 'http://localhost:' + port,var uri = 'https://localhost:' + port为方便起见,您最好更换.

Answer 5

在 Chrome 或 Edge 中运行时，您仍会收到警告，因为该证书不是受信任的证书。但是您可以通过设置以下标志来关闭运行站点时的提示：

chrome://flags/#allow-insecure-localhost

这也适用于最新版本的 Edge。

Answer 6

Chen 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的控制台错误。将此行添加到devServer作为https的同级项，将使该错误得到遏制。如果您喜欢这个答案，请确保也喜欢他的评论！