如何在本地开发中使用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将其评估为安全的？

- blarg

---

你是否试图使用主题名称为“localhost”的证书？因为那将不得不是自签名的。如果您想使用公共证书来保护您的网站，您需要获取一个针对“vue-gui.mydomain.com”（或URL是什么）的证书，通配符证书也可以使用...但绝不会有公共证书提供商为“localhost”提供证书。 - Matt Oestreich

您要为哪个URL生成证书？您是否拥有本地证书颁发机构？请参阅此链接以获取更多信息 - 通常为“localhost”生成证书并不是一件好事... - Matt Oestreich

mkcert 让这个过程变得非常简单。它将生成一个根证书，并将证书安装到 Chrome 和 Firefox 的受信任存储中。 - Brian Lee

@DigitalDrifter，我安装了mkcert，它正常工作！ - blarg

如果您使用Chrome浏览器，请查看此答案：https://dev59.com/PGsz5IYBdhLWcg3w6MNS#31900210 - Godsayah

Answer 1

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

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

设置为启用，重新启动Chrome即可。

- ssten

---

如果您正在使用虚拟主机，则不需要这样做。 - digout

Answer 2

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

- Emmanuel

---

是的，这很有趣。Webpack.JS 的官方文档说得不一样，但这个解决方案可行。谢谢。 - Muhammed Kadir

Answer 3

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

https://192.168.2.210:8080/

可以正常工作，而

https://localhost:8080/和https://127.0.0.1:8080则会出现证书问题。

- Andy

---

这很简单，谢谢。 我还需要将我的Java API地址（.env.dev）更改为127.0.0.1:8081，以停止HTTP 307重定向到HTTPS。 - Alexandre

Answer 4

如果您拥有合法的证书，Chad Carter在这里给出了很好的解释：https://dev59.com/tFcO5IYBdhLWcg3wcRJk#57226788 步骤如下：

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,
    }
}

3. 在为您的项目提供服务时，请确保启用了https（例如：$ vue-cli-service serve --https true）

- HyperActive

Answer 5

你做得很对，但是你还需要将自签名证书添加到浏览器的证书颁发机构中，因为它是自签名的。

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

有许多网站可以找到如何操作的方法，其中一个我认为非常清晰的是如何为本地主机域创建HTTPS证书。基本上，你必须按照该链接中描述的这些步骤进行操作：

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

2. 为认证机构生成证书

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

3. 为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.local"

您需要根据需要更改-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步骤为每个服务器或虚拟机进行开发，并在不需要在浏览器中导入新的认证机构的情况下使用它们。

- Rodrigo

Answer 6

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

最后一件你需要做的事情是打开你的操作系统资源管理器，点击install.bat文件。

- kevin Sue