通常,在本地开发环境中,Vue 应用程序通过http协议提供服务。但在生产环境中,它通过https提供服务。如果您使用的 API 只能由通过 HTTPS 提供的应用程序使用,则可能需要在https中运行本地服务器。

在本指南中,我们将使用我们自己的 SSL 证书在我们的 Vue 应用程序的开发环境中设置 HTTPS。

查看 CLI

搭建 Vue 项目的最常见方法是通过其vue-cli工具并运行以下命令

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve

进入全屏模式 退出全屏模式

该应用程序在本地运行在http://localhost:8080

现在我们希望通过https为应用程序提供服务。我们可以通过使用mkcert在开发中为localhost设置我们自己的 SSL 证书来轻松做到这一点

步骤 1:创建 SSL 证书

为了轻松创建有效的 SSL 证书,我们使用 mkcert 工具。运行以下命令获取证书。

brew install mkcert

mkcert -install

进入全屏模式 退出全屏模式

现在我们已经在我们的机器上成功地创建了证书颁发机构(CA),这使我们能够为我们未来的所有项目生成证书。

从我们的 hello-world 项目的根目录,运行以下命令,

mkdir -p .certs

mkcert -key-file ./.certs/key.pem -cert-file ./.certs/cert.pem "localhost"

进入全屏模式 退出全屏模式

现在我们有一个.certs文件夹,其中包含密钥和证书文件。

请确保将此文件夹添加到.gitignore,以免我们不小心将这些文件提交给版本控制。_

第2步:将HTTP添加到vue配置文件

Vue CLI 允许我们通过配置文件来配置它,如下所示

const fs = require('fs');

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: {
      key: fs.readFileSync('.certs/key.pem'),
      cert: fs.readFileSync('.certs/cert.pem'),
    },
    hotOnly: false,
  },
};

进入全屏模式 退出全屏模式

在这里,我们指向 CLI,我们的证书文件在其中,只需将带有密钥和证书的对象传递给 devServer 的 https 配置。

我们快要结束这个过程了。让我们再次重新启动服务器。瞧,现在我们的应用程序通过https提供服务。

快乐解决!