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

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

陈建武的回答帮助了我，但为了帮助那些想要扩展答案的评论中的人，我正在创建这个答案。 我希望它有所帮助。

问题基本上是，我们如何告诉浏览器“我知道这是一个无效的证书，但我可以接受，因为我正在本地开发一个站点。”

因此，要尝试在一个地方做出完整的答案，就在这里...

首先，在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 将消除该错误。 如果您喜欢这个答案，请确保也喜欢他的评论！

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

在/build/webpack.dev.conf.js中，到devWepackConfig中的devServer中，添加

https: true

Answer 5

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 6

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

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

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

Answer 7

最简单的方法是进入 package.json 并将“dev”更改为

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

它仍然会在控制台中的http://localhost上运行消息，但您可以在https://localhost上访问该站点

Answer 8

离开 NearHuscarl 的答案，使用带有 vue 3.0.0 的 Vue Cli， key和cert必须放在devServer级别（而不是在https中）。 这很可能是由于您正在使用的 WebPack 版本，所以如果您仍然无法弄清楚，请查看 webpack 配置文档

const fs = require('fs')

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

Answer 9

如果有人在 2022 年 7 月为此苦苦挣扎，并希望在 WebPack 5 中使用 HTTPS（建议从https选项转移到新的server选项）并摆脱弃用警告，请注意，Vue CLI 团队最近已修复此问题。 您应该将 @vue/cli-service 包更新到最新版本5.0.8 ，一切都会开始正常运行。 现在您可以在vue.config.js文件中使用新的server选项（确保您已使用mkcert生成了证书）：

server:{
  type: 'https',
  options: {
    key: fs.readFileSync("./src/cert/your.site+3-key.pem"),
    cert: fs.readFileSync("./src/cert/your.site+3.pem"),
  }
}

Answer 10

Vue Js论坛的一个很好的解决方案...首先创建自己的证书，然后在https://forum.vuejs.org/t/vue-cli-serve-with-https/39359/2之后创建一些配置