如何在 Vue CLI 中使用 SSL 进行本地开发？

Question

我知道在 Vue CLI 中使用 https 我可以在 vue.config.js 文件中的 devServer 下设置“https: true”，但我还需要一个自签名证书。

我已经尝试使用 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

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

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 2

只需在您的 Chrome 中输入此内容

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

设置为Enabled，重新启动 Chrome，您就可以开始了。