Vue CLI 本地开发中如何安全使用 HTTPS？

2024-03-12 00:38:17

在 Vue CLI 本地开发中安全使用 HTTPS

简介

在现代网络开发中，使用 HTTPS 协议至关重要，它可以确保数据传输的安全性和隐私性。在 Vue CLI 中使用 SSL 也同样重要，因为它可以让你在本地开发环境中安全地运行和测试你的应用。本文将指导你如何在 Vue CLI 中设置 SSL，并解决在 Chrome 中可能出现的证书评估问题。

生成自签名证书

为了在本地环境中使用 HTTPS，我们需要创建一个自签名证书。以下是生成自签名证书的步骤：

生成私钥：

openssl genrsa -out server.key 2048

生成证书签名请求 (CSR)：

openssl req -new -key server.key -out server.csr

生成自签名证书：

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.cert

添加证书到 Vue CLI 项目

创建证书后，我们需要将其添加到我们的 Vue CLI 项目中。在项目根目录下创建一个名为 certs 的目录，并将 server.key 和 server.cert 文件移动到该目录中。

配置 Vue CLI devServer

在 vue.config.js 文件中，我们需要启用 devServer 的 https 支持，并指定自签名证书的位置：

module.exports = {
  devServer: {
    https: {
      key: path.join(__dirname, 'certs', 'server.key'),
      cert: path.join(__dirname, 'certs', 'server.cert')
    }
  }
};

解决 Chrome 中的证书评估问题

在 Chrome 中访问你的本地开发 URL 时，你可能会看到“不安全”警告。这是因为 Chrome 不信任自签名证书。要解决此问题，你需要将证书添加到 Chrome 的信任存储中。

导出证书：

openssl x509 -outform der -in server.cert -out server.der

导入证书到 Chrome：

打开 Chrome。
在地址栏中输入 chrome://settings/certificates。
点击“导入”。
选择 server.der 文件。
选择“信任此证书用于标识网站”。
点击“确定”。

重新启动 devServer

执行上述步骤后，重新启动你的 devServer。你应该会看到 Chrome 中的证书状态已更改为“安全”。

结论

通过遵循本文中的步骤，你可以在 Vue CLI 本地开发环境中安全地使用 HTTPS。自签名证书虽然不能用于生产环境，但对于本地开发和测试来说却是非常有用的。

常见问题解答

为什么我的证书在 Chrome 中显示“不安全”？
答：可能是因为你没有将证书添加到 Chrome 的信任存储中。请参阅本文中的说明来解决此问题。
我无法导入证书到 Chrome。
答：确保你已经导入了正确的文件（server.der）。你还可以尝试清除 Chrome 浏览数据并重新尝试。
我可以使用自签名证书进行生产部署吗？
答：不，自签名证书仅供本地开发和测试使用。它们不适合生产环境，因为它们不能被客户端信任。
如何创建具有更长有效期的自签名证书？
答：在生成自签名证书时，可以使用 -days 参数指定所需的天数。例如，要创建具有 10 年有效期的证书，请使用 -days 3650。
如何让我的证书支持多个域名？
答：要创建一个支持多个域名的自签名证书，请使用 Subject Alternative Name (SAN) 扩展。这可以通过在 openssl x509 命令中使用 -subjectAltName 参数来实现。