解决使用https运行本地项目（vue、webpack）

背景

项目是单点登录，cas登录完重定向回来，原来的http协议变成了https，无法运行。

解决（一图胜千言）

image.png

dev-server 默认通过HTTP服务。你可以通过配置让它通过 HTTP/2 提供HTTPS服务。

webpack.config.js

module.exports = {
  //...
  devServer: {
    https: true
  }
};

以上设置使用了一个自签名证书，你可以自定义：

webpack.config.js

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'),
    }
  }
};

此配置直接传递到 NodeJs 的 HTTPS 模块, 查看更多关于 HTTPS documentation 的信息。

在CLI package.json 中用法

webpack-dev-server --https

你可以在CLI package.json 中利用以下配置自定义证书

webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem