webpack 设置 devServer 为 https 协议#

统计信息：字数 1470 阅读3分钟

最近使用另一个第三方库 @zxing/library 需要 https 开发环境才能使用，默认 webpack-dev-server 开启的是 http 协议，所以需要改一下配置，才能调试这个功能。

1、改动 webpack 配置#

很简单，我们只需要改webpack的devServer的其中一项配置，即可实现启动项目的时候，默认是https协议

devServer: {
	host: '0.0.0.0',
	port: 8080,
	https: true, // 设置默认使用 https
}

如果上面的更改后无效，那么继续调整环境变量

2、更改环境变量#

npm i cross-env -D

更改启动脚本

- "start": "node scripts/start.js",
+ "start-https": "cross-env HTTPS=true REACT_APP_ENV=development node scripts/start.js"

3、解决浏览器安全链接报错#

如果我们重新启动 webpack-dev-server 后，打开谷歌浏览器，默认会提示如下报错

我们可以参考这里的方案，让谷歌浏览器不报错 https://blog.csdn.net/m15345704381/article/details/130760324 或者我本地开另一个浏览器，不会提示安全问题，也可以解决这个问题。

参考资料#

https://blog.csdn.net/dclnet/article/details/96316401

https://blog.csdn.net/Boale_H/article/details/109264808