Vue.js VueJS项目运行时出现NET::ERR_CERT_INVALID错误

在本文中，我们将介绍当运行VueJS项目时出现NET::ERR_CERT_INVALID错误的问题，并提供解决方案。

阅读更多：Vue.js 教程

问题描述

在运行VueJS项目时，有时会出现NET::ERR_CERT_INVALID错误。这个错误通常是由于HTTPS证书出现问题导致的。当我们尝试通过HTTPS连接到服务器时，如果服务器的证书无效或过期，浏览器就会阻止连接并显示该错误。

解决方案

要解决NET::ERR_CERT_INVALID错误，我们可以采取以下步骤：

使用不安全的HTTP连接

一个暂时的解决方案是使用不安全的HTTP连接而不是HTTPS连接。这是不推荐的，因为HTTPS连接提供了对数据的加密和安全性保护。但是，在开发或测试环境中，我们可以暂时使用HTTP连接来避免证书错误。我们可以通过修改Vue项目的配置文件来实现这一点。

在Vue项目的根目录中，找到config/index.js文件。在该文件中，我们将build和dev中的https: true改为https: false。修改后的配置文件片段如下所示：

module.exports = {
  // ...
  dev: {
    // ...
    https: false,
    // ...
  },
  // ...
}

修改后，再次运行Vue项目时将使用HTTP连接而不是HTTPS连接。

忽略证书错误

另一种解决方法是在浏览器中忽略证书错误。这是一个较为简单的解决方案，但并不推荐在生产环境中使用。以下是一些常用浏览器的忽略证书错误的方法：

Chrome浏览器

在Chrome浏览器中，我们可以通过以下步骤忽略证书错误：

1. 打开Chrome浏览器并访问运行Vue项目的网址。
2. 在出现NET::ERR_CERT_INVALID错误的页面上，点击左上角的锁形状图标。
3. 在弹出的窗口中，点击”证书信息”。
4. 在弹出的证书详细信息窗口中，找到”常规”选项卡，并点击”查看证书”按钮。
5. 在”证书详细信息”窗口中，点击”安装证书”按钮。
6. 在”证书导入向导”窗口中，选择”将所有的证书都放入下列存储”，然后点击”浏览”按钮，并选择”受信任的根证书颁发机构”。
7. 点击”下一步”，然后按照导入证书的提示完成操作。
8. 重新加载运行Vue项目的网址。

Firefox浏览器

在Firefox浏览器中，我们可以通过以下步骤忽略证书错误：

1. 打开Firefox浏览器并访问运行Vue项目的网址。
2. 在出现NET::ERR_CERT_INVALID错误的页面上，点击高亮显示的”高级”按钮。
3. 在弹出的菜单中，选择”继续前往(不安全)”。
4. 页面将重新加载，并继续使用不安全的连接。

使用有效的HTTPS证书

最佳的解决方案是为我们的Vue项目使用一个有效的HTTPS证书。这可以通过购买或使用免费的证书颁发机构（如Let’s Encrypt）来实现。获得有效的HTTPS证书后，我们可以在Vue项目的配置文件中启用HTTPS连接，并将证书与项目关联。

在Vue项目的根目录中，找到config/index.js文件。在该文件中，我们将build和dev中的https: false改为https: true。然后，还需要将证书与项目关联，请根据证书颁发机构的指南执行相应的操作。

总结

当我们运行VueJS项目时出现NET::ERR_CERT_INVALID错误时，我们可以使用以下解决方案之一来解决问题：

1. 使用不安全的HTTP连接（仅限于开发或测试环境）。
2. 在浏览器中忽略证书错误。
3. 使用有效的HTTPS证书。

使用这些解决方案之一，我们可以成功解决NET::ERR_CERT_INVALID错误，并顺利运行VueJS项目。