Question

我知道可以在Vue CLI中使用https，可以在devServer下的vue.config.js文件中设置“ 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

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

https://192.168.2.210:8080/

工作正常，而

https://localhost:8080/和https://127.0.0.1:8080对证书问题不屑一顾。

Answer 2

只需在您的Chrome中输入

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

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

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。基本上，您必须按照该链接中描述的这些步骤进行操作：

生成证书颁发机构密钥：

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 来生成本地主机证书。

这是证书配置文件：

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

步骤如下：

在您的项目根目录中创建 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）

Answer 6

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

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

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

6 个答案: