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

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

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

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

设置为Enabled，重启Chrome，一切顺利。

Answer 2

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

https://192.168.2.210:8080/

工作正常，而

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

Answer 3

我的问题是每个人都在谈论将证书属性放在“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 4

您做得对，但您还必须在浏览器的证书颁发机构中添加自签名证书，因为它是自签名的。

除了使用自签名证书，您还可以创建根证书，然后生成 localhost 或其他服务器标识符证书。我推荐这个解决方案，因为这样您可以为所有非生产环境生成证书，并且只导入一个自定义证书颁发机构。

您可以在很多网站上找到如何操作，其中一个我认为非常清楚的是How to create an HTTPS certificate for localhost domains。基本上，您必须按照该链接中描述的这些步骤进行操作：

1. 生成证书颁发机构密钥：

   openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Example-Root-CA"

这里我们要随心所欲地改变参数，主要是-sub参数。

1. 为证书颁发机构生成证书

   openssl x509 -outform pem -in RootCA.pem -out RootCA.crt

2. 为 localhost 生成密钥

   openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=US/ST=YourState/L=YourCity/O=Example-Certificates/CN=localhost。本地”

您必须根据需要更改 -subj 的位置或保持不变。

4. 通过创建证书配置文件并请求 openssl 生成它来生成 localhost 证书。

这是证书配置文件：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = fake1.local
DNS.3 = fake2.local

这是生成证书的命令：

openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile domains.ext -out localhost.crt

获得证书后，您必须在首选浏览器上导入证书颁发机构。您还可以针对开发所需的每台服务器或虚拟机执行 3 和 4 个步骤并使用它们，而无需在浏览器中导入新的证书颁发机构。

Answer 5

如果你有合法证书，Chad Carter 在这里给出了很好的解释：https://stackoverflow.com/a/57226788/2363056

步骤如下：

1. 在您的项目根目录中创建vue.config.js（如果还没有的话）
2. 添加以下代码：

const fs = require('fs')

module.exports = {
    devServer: {
    port:8080,
    host: 'example.com',
    https: true,
    key: fs.readFileSync('/etc/ssl/keys/example.com.pem'),
    cert: fs.readFileSync('/etc/ssl/keys/example.com/cert.pem'),
    https: true,
    hotOnly: false,
    }
}

1. 为您的项目提供服务时，确保启用 https（即$ vue-cli-service serve --https true）

Answer 6

我使用 mkcert 在 Windows 操作系统上创建受信任的 https 证书。 mkcert。

您应该做的最后一件事是打开您的操作系统资源管理器，点击install.bat 文件