很简单,我们只需要改webpack的devServer的其中一项配置,即可实现启动项目的时候,默认是https协议 devServer: {host: '0.0.0.0',port: 8080,https: true, // 加入这句即可} react脚手架如何配置webpack的devServer 阅读react脚手架的webpack配置 找到getHttpsConfig.js,发现关于devServer的https与process.env.HTTPS...
mkcert test.dev STEP5 拷贝证书目录到项目下 把上面生成test.dev-key.pem和test.dev.pem拷贝到项目目录下,此处我是在项目根目录下新建https存放 STEP6 配置devServer开启https devServer: {host:"jydeng.dev",port:80,disableHostCheck:true,https: {key: fs.readFileSync(path.resolve(__dirname,"./https/...
mkcert test.dev 1. 2. 3. 4. STEP5 拷贝证书目录到项目下 把上面生成test.dev-key.pem和test.dev.pem拷贝到项目目录下,此处我是在项目根目录下新建https存放 STEP6 配置devServer开启https devServer: { host: "jydeng.dev", port: 80, disableHostCheck: true, https: { key: fs.readFileSync(path...
在开发项目时，若使用webpack-dev-server启动HTTPS服务，尝试在Chrome浏览器中连接会收到“您的连接不是私密连接”的提示，并需点击“高级-> 继续访问”跳过警告。此现象通常是因为webpack-dev-server提供的证书未被信任。问题归结于证书信任机制，webpack-dev-server自动生成并提供了一个自签名的根证书。
:因为 Facebook 的 Javascript SDK 只能在https环境中运行,为了开发方便,本地搭建https开发环境。 本次使用webpack devserver搭建本地https开发环境,查询webpack配置后得知,还有两个问题需要我们解决,域名 和 证书。 一、域名:域名可以用配置hosts解决,hosts配置一条记录指向127.0.0.1即可。
1. 找到项目里面的 node_module 目录下的 webpack-dev-server 2. 删除webpack-dev-server/ssl/server.pem 3. 修改 webpack-dev-server/lib/utils/createCertificate.js,在extensions 里面加上以下配置: { name: 'extKeyUsage', serverAuth: true, clientAuth: true, codeSigning: true, timeStamping: true ...
使用webpack-dev-server,设置 `https: true`时,在chrome打开,会提示“您的连接不是私密连接”, 然后需要点击 “高级 -> 继续访问”,就可以了。 引起这个问题的原因,自然是webpack-dev-server提供的证书没有被信任。不过通常在开发项目时,顺手点一下继续访问,也没太多影响,往往就不会去单独设置信任证书了。
这在webpack-dev-server/lib/utils/createCertificate.js中的证书生成函数有所体现。证书文件位于webpack-dev-server/ssl/server.pem。解决策略有二：一是临时修改createCertificate.js以添加所需的字段；二是将webpack-dev-server版本升级至至少3.9.0以上版本，以适应新的证书要求。
webpack-dev-server官网地址:https://webpack.js.org/configuration/dev-server/ 1 安装依赖 由于我们使用的webpack版本是当前最新的5.73.0、webpack-cli版本是4.9.2,webpack-dev-server的版本也要使用最新的4.x: yarn add webpack-dev-server -D
最开始是试验一下https访问是否正常,在WebpackDevServer参数配置了https:true,再通过npm run dev启动本地服务正常,开发一段时间之后想要取消https的访问配置,设置https:false后,本地服务是http地址,但生成的资源链接还是https的,导致资源访问被拦截,手动通过http访问资源是可以访问到的页面效果及控制台截图 WebpackDevSer...