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

Question

我理解如何使用带有Vue CLI的https，可以在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?提供自我签名证书时，如何使铬评估它是安全的

Answer 1

只需在你的Chrome中输入这个

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

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

Answer 2

我的问题是，每个人都在讨论如何将cert属性放在"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 3

使用网络路径，而不是回送或本地主机。例如

https://192.168.2.210:8080/

工作很好，而

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