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

Posted 2023-02-22

【中文标题】如何使用 SSL 和 Vue CLI 进行本地开发？

【英文标题】：How to use SSL with Vue CLI for local development?

【发布时间】：2019-09-12 18:21:23

【问题描述】：

我知道在 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 评估我的自签名证书是否安全？

【问题讨论】：

您是否尝试使用主题名称为“localhost”的证书？因为............那必须是自签名的。如果您想使用公共证书来保护您的网站，您需要获得“vue-gui.mydomain.com”（或任何 URL）的证书，通配符证书也可以工作......但绝不会公共证书提供者会给你一个'localhost'的证书吗..

您要为哪个 URL 生成证书？您有本地证书颁发机构吗？ Please see this link for more info - 通常为“本地主机”生成证书不是一件好事..

mkcert 让它变得如此简单。它将生成一个根 CA 并将证书安装到 Chrome 和 Firefox 的受信任存储中。

@DigitalDrifter 我安装了 mkcert 并且它正在工作！

如果在 Chrome 上看到这个答案：***.com/a/31900210/3660269

【参考方案1】：

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

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

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

【讨论】：

如果您使用的是虚拟主机，则不会。

【参考方案2】：

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

https://192.168.2.210:8080/

工作正常，而

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

【讨论】：

这很有效，谢谢我还需要将我的 Java API 地址 (.env.dev) 更改为 127.0.0.1:8081 以停止 HTTP 307 重定向到 HTTPS

【参考方案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,
   

【讨论】：

是的，这很有趣。 Webpack.JS 的官方文档另有说明；但这个解决方案有效。谢谢。

【参考方案4】：

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

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

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

生成证书颁发机构密钥：

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参数。

为证书颁发机构生成证书

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

为 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 的位置或保持不变。

通过创建证书配置文件并请求 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 个步骤并使用它们，而无需在浏览器中导入新的证书颁发机构。

【参考方案5】：

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

步骤如下：

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

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,
    

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

【参考方案6】：

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

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