Web启动项目走Https协议（Webpack版，Umi版和Host代理版）

最新推荐文章于 2024-07-16 10:54:40 发布
最新推荐文章于 2024-07-16 10:54:40 发布
阅读量2.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： umi web前端 Tool 文章标签： https javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40593656/article/details/120745490
本文介绍了在不同场景下，如何让Web项目在启动时使用HTTPS协议。包括Webpack配置、Umi脚手架的设置以及通过Host代理的方式，确保在调试过程中满足HTTPS需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求

Web项目的启动，一般是默认的http协议，在某些业务需求时，需要走https来调试

Webpack版本

只需在webpack的devServer中配置就可以了

	devServer: {
   
   
		host: '0.0.0.0',
		port: 8080,
		https: true, // 加入这句即可
	}

Umi脚手架版本

官方文档介绍：https://umijs.org/zh-CN/docs/env-variables#https

最低0.47元/天 解锁文章

200万优质内容无限畅学
前端webpack将http修改为https
qq_36869635的博客
02-22 2368
原因 因为 H5 的 摄像头 SDK 只能在 https 环境中运行，为了开发方便，本地搭建https开发环境 本次使用webpack devserver搭建本地https开发环境，查询webpack配置后得知，还有两个问题需要我们解决，域名 和 证书。 一、域名： windows 系统：C:\WINDOWS\system32\drivers\etc 文件下 ，用记事本打开 hosts 文件 在下面添加这么一段：192.168.1.98 jydeng.dev 就可以了 注意中间有空格 就可以使用
umijs页面引入框架报错
chun_sh的博客
06-11 1256
一、引入方法的错误 原因:原来的引入方式是早期版本的写法，所以引入启动一直报错 解决办法：新版引入是import { Link } from ‘umi’; 项目启动报`` E:\demo\react-demo>umi dev Starting the development server... × Webpack Compiled with some errors in 9.77s ERROR Failed to compile with 1 errors
webpack devServer开启https(vue/cli-3.x)
小问's blog
07-17 9966
版本vue/cli-3.x webpack devServer开启HTTPS；注意https参数为true，port 同时为443； 端口为80或者443，在Mac或者Linux系统上启动时记得加sudo, 如 sudo npm run serve 如果要用域名访问的话，host设为 0.0.0.0 然后改下hosts域名指向127.0.0.1就行了 ...
webpack本地调试起https
sherpan的博客
08-21 1874
webpack.config.js proxy:{ "api":{ https:true } } package.json "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --https" 起来之后就是https
webpack入门必备（注：不懂的操作请访问官网https://www.webpackjs.com/）
m0_53404077的博客
12-03 1372
一篇速学webpack 机不可失 失不再来 收藏吃灰吧
webpack配置devServer配置https代理与证书
热门推荐
舜岳的博客
01-17 1万+
浏览器如果需要开发某些特定功能，需要https浏览器才会给予功能权限， 则开发时我们需要在https环境 下面是配置一个webpack devServer的https环境 //webpack.config.js module.exports = { ... devServer: { port: 8080, proxy: [{ context: ['/api'], //将 "https://urlname.com:8080/api" 转发到 "https://127.0.0
vite或webpack配置https服务
qq_40344815的博客
02-09 926
vite或webpack配置https服务
从0到1教你搭建前端团队的组件系统（高级进阶必备）
02-20 1429
随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。 我们在开发管理系统或者中台产品时，完全可以使用这种第三方库来开发，因为首先其服务的用户群体比较...
微前端（qiankun）
Arui_0的博客
06-13 1788
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略，下面这张图来了解下。 qiankun qiankun 蚂蚁金服基于single-spa 的微前端解决方案，生产可用。 特性 基于 single-spa 封装，提供了更加开箱即用的 API。 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。 样式隔离，确保微应用之间样
Webpack 入门
idomyway的博客
03-21 2285
为什要使用WebPack    现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 模块化，让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaS
webpack简介
BADAO_LIUMANG_QIZHI的博客
09-25 345
  一、webpack中文网 https://www.webpackjs.com/ 二、简介 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AM...
webpack入门启动webpack工程
BADAO_LIUMANG_QIZHI的博客
10-11 2470
前提： 安装完webpack以及webpack-dev-server 参照： https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/83011108 添加代码： 1.首先在目录demo下创建一个js文件：webpack.config.js 并初始化它的内容： var config = { }; module.exp...
Webpack的介绍与安装
A____t的博客
04-24 325
Webpack介绍： Webpackhttps://www.webpackjs.com/ 简单来说，Webpack是一个前端模块化打包工具。 Webpack支持前端模块化方案：AMD、CMD、CommonJS、ES6等。能够将模块化打包成浏览器可以识别的JS代码，帮助我们处理模块间的依赖关系。 在Webpack中，不仅仅是JavaScript文件，我们的CSS文件、图片、json文件等都被当做模块来管理使用。 Webpack安装： webpack的运行必须依赖node环境，n..
webpack-dev-server的proxy代理https网站报错：ERR_TLS_CERT_ALTNAME_INVALID
前端蜗牛君
04-25 5677
本地开发环境中使用webpack-dev-server用作对远程测试服务器的API请求的代理。远程服务器使用的是HTTPS，这时页面会报错： 打开vscode，终端报错： [HPM] Error occurred while trying to proxy request /api/v1/home/comprehensive-search from localhost:8888 to https://www.xxx.com (ERR_TLS_CERT_ALTNAME_INVALID) (https:
Mac umi4 配置https
星宇大前端
07-05 1909
umi4 配置https
webpack 4
a36267862的博客
11-12 167
https://webpack.css88.com/guides/installation.html
Webpack-dev-server的proxy用法
qq_15058285的博客
10-24 1407
Webpack-dev-server的proxy用法前言在webpack.config.js中配置使用一:使用二使用三:使用四:使用五:解决跨域原理vue-cli中proxyTable配置接口地址代理示例更多参数参考 前言 如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。 解决开发环境的跨域问题(不用在去配置nginx和host, 爽...
webpack配置代理请求
最新发布
qq_45089709的博客
07-16 1168
【代码】webpack配置代理请求。
webpack－生产环境最佳实践(https://webpack.js.org/guides/production/)
cotexarm7的专栏
08-07 2251
Production 此篇文章介绍利用webpack构建线上版本的最佳实践。 The Automatic Way 一般来说，运行webpack -p命令。此命令相当于webpack --optimize-minimize --define process.env.NODE_ENV="'production'"命令。这条指令执行以下操作： 》使用UglifyJsPlugin插件压缩文件 》...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值