How to run Vue.js dev serve with https?

当您想使用 HTTPS 来运行 Vue.js 的开发服务器（即 vue-cli-service serve）时，主要有两种方法可以实现。这对于模拟生产环境或进行涉及安全内容的开发非常有用，比如处理认证或加密数据。以下是两种方法：

方法一：使用 vue.config.js 配置文件

在 Vue.js 项目的根目录中，您可以创建或修改 vue.config.js 文件来指定 dev server 的配置。您可以通过配置 devServer 选项来启用 HTTPS：

javascript
module.exports = {
  // 开发服务器设置
  devServer: {
    https: true,
  }
};

这里设置 https: true 就足以让开发服务器通过 HTTPS 启动。Vue CLI 会自动为您生成自签名的 SSL 证书，虽然这些证书在浏览器中通常不被信任，但它们足以开发使用。

方法二：使用命令行参数

如果您不想修改 vue.config.js 文件，也可以直接在启动开发服务器时通过命令行来启用 HTTPS。在您的终端或命令提示符中，可以使用以下命令：

bash
vue-cli-service serve --https

这个命令同样会启动一个通过 HTTPS 协议的开发服务器，使用自动创建的自签名证书。

使用自定义 SSL 证书

如果您有自己的 SSL 证书，想要用它来提供一个更接近生产环境的测试环境，您也可以在 vue.config.js 中指定证书路径：

javascript
const fs = require('fs');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    }
  }
};

在这里，您需要替换 /path/to/server.key、/path/to/server.crt 和 /path/to/ca.pem 为您证书文件的实际路径。这样配置后，开发服务器将使用您提供的证书来启动 HTTPS 服务。

结论

使用 HTTPS 运行 Vue.js 开发服务器有助于确保您的开发环境更加安全，也能更好地模拟生产环境的行为，特别是在处理安全敏感的功能时。您可以根据实际情况选择最适合的方法来启用 HTTPS。