如何使用https运行Vue.js dev-service？

我正在使用Vue cli创建带有网页包模板的Vue项目。如何在开发中使用https运行它：

npm run dev

？

网页包模板用作开发服务器。那就换一个吧

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);

---

请注意，在网页包模板中，

http://localhost:8080

将使用模块在浏览器中自动打开。所以您最好替换

var-uri=http://localhost:“+端口

带有

var uri=”https://localhost:“+端口

为方便起见

在

/build/webpack.dev.conf.js

中，添加到

devServer

中的

devpackconfig

https: true

---

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

它仍然会在控制台中显示运行中的消息，但您可以在最新的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

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

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

所以，要想在一个地方做出完整的回答，就这样

首先，在

vue.config.js的内部确保包含

const fs=require（'fs'））
module.exports={
开发服务器：{
https:{
key:fs.readFileSync（'./certs/example.com+5-key.pem'），
cert:fs.readFileSync（'./certs/example.com+5.pem'），
},
公众：'https://localhost:8080/'
}
}

显然，您可以在其中包含其他内容，但最主要的是，您有带有key和cert子项的https。现在，您需要指出您的证书文件所在的位置

我们不是简单地将https设置为true，而是将带有密钥和证书的对象传递给https

我们正在告诉vue cli我们要使用此特定证书和密钥

我们如何获得证书和密钥？我们必须创造它

幸运的是，有一个工具可以帮助您轻松完成此任务：
（目前指向）

您可以按照GitHub中的说明安装它。我个人刚刚从以下网站获得了最新版本：

然后按照说明进行操作：

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\u CONNECTION\u densed
。将这一行作为https的同级添加到devServer将使该错误消失。如果你喜欢这个答案，一定要喜欢他的评论
 在Chrome或Edge中运行时仍然会收到警告，因为该证书不是受信任的证书。但您可以通过设置以下标志在运行站点时关闭提示：

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

这也适用于最新版本的Edge。
如果您使用vue ui为应用程序提供服务，一个简单的解决方案是替换

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

与

在项目的
package.json
文件中

现在使用VUEUI为您的应用程序提供服务。你可以做更多的改变。请参见
谢谢@choasia，它工作得非常好！我使用以下命令创建密钥和证书文件：openssl genrsa-out localhost.key 2048 openssl req-new-x509-key localhost.key-out localhost.cert-days 3650-subc/CN=localhost all good，但是浏览器警告该站点不受信任。我将证书导入“可信根证书颁发机构”（在windows中），然后在IE中工作，但不在chrome或Firefox中工作，有什么想法吗？谢谢，这有用吗？为什么被否决？在我的例子中，在
devServer
下添加此选项非常有效。在具有网页包3Works:
“scripts”：{“serve”：“vue CLI service serve--https”}
@Nico Prat您应该用此文本回答，它在CLI 2上非常有效。我使用了
“dev”：“cross env NODE_env=开发网页包开发服务器--打开--热--https--键./localhost.key--证书./localhost.crt”
由生成的localhost.key和localhost.crt。（vuejs 2.6.11）这是迄今为止使用vue cli 3So的项目的最新答案。但是chrome>58在net:：ERR\u CERT\u COMMON\u NAME\u INVALIDWorks很好，但是您只需要
https:true
部分。其他变量是可选的，不需要使用https。我仍然在chrome中得到ERR\u CERT\u AUTHORITY\u INVALID。有没有办法在chrome中解决这个问题？是否有人设法绕过Chrome中的“ERR\u CERT\u AUTHORITY\u INVALID”问题？非常感谢！这比我想象的要简单。在我的例子中，我不得不向
devServer
config添加一个选项以停止
gethttps://localhost/sockjs-node/info?t=1565111974584 网络：：错误连接被拒绝
控制台中的错误：
{公众：'https://localhost:8080/“}
在使用Vuetify时，我必须对此进行轻微修改，否则我会出现错误：“[ERR_INVALID_ARG_TYPE]：“options.cert”属性必须是string类型或Buffer、TypedArray或DataView的实例。收到了Object的实例"。我将https:true设置为true，并在同一级别添加了密钥和证书属性，即devServer的属性。然后，一切似乎都按照预期进行了。谢谢你，查德，我一直回到这个答案，它非常有用。我不明白的是，如果vue cli生成的应用程序甚至不能在chrome开箱即用的浏览器上运行，那么vue cli的意义何在？当然可以当您运行
vue create
？@Bassie时，ey可以提供类似的功能。我很高兴您发现这很有用。我猜如果我们
 "serve": "vue-cli-service serve",

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