如何将SSL与Vue CLI一起用于本地开发？

Question

我了解如何在Vue CLI中使用https，我可以在Vue中的devServer下设置“https:true”。配置。js文件，但我还需要一个自签名证书。

我尝试使用OpenSSL生成一个自签名的，并在我的vue.config.js文件中使用以下内容来定位：

const fs = require('fs');

module.exports = {
    devServer: {
        port: '8081',
        https: {
            key: fs.readFileSync('./certs/server.key'),
            cert: fs.readFileSync('./certs/server.cert'),
        },
    },
};

Chrome确认它正在使用我的证书，但仍然显示https为“不安全”

在通过Vue CLI提供自签名证书时，如何使chrome评估其安全性？

Answer 1

使用网络路径而不是环回或localhost。举个例子

https://192.168.2.210:8080/

工作正常，而

https://localhost:8080/和https://127.0.0.1:8080对证书问题犹豫不决。

Answer 2

我的问题是，每个人都在谈论将证书属性放在“https”子配置节点中，但这不起作用，您必须将其放在devServer config节点中：

module.exports = {
devServer: {
    port: '8081',
    https: {
       key: fs.readFileSync('./certs/server.key'),
          --> this is WRONG

这是正确的方法：

module.exports = {
  devServer: {
    disableHostCheck: true,
    port:8080,
    host: 'xxxxxx',
    https: true,
    //key: fs.readFileSync('./certs/xxxxxx.pem'),
    //cert: fs.readFileSync('./certs/xxxxxx.pem'),
    pfx: fs.readFileSync('./certs/xxxxxx.pfx'),
    pfxPassphrase: "xxxxxx",
    public: 'https://xxxxxx:9000/',
    https: true,
    hotOnly: false,
   }
}

Answer 3

只需在你的Chrome中输入这个

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

设置为启用，重启Chrome，就可以开始了。