Vite开启https — 离线和在线生成签名证书

已于 2023-02-15 18:21:34 修改
阅读量4.2k 收藏 5
点赞数 3
文章标签： https
于 2023-02-15 18:21:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liuer_Qin/article/details/129046599
版权
本文介绍了如何使用mkcert工具在离线和在线情况下为Vite项目生成HTTPS证书，以提高开发效率并实现HTTP/2的多路复用。详细步骤包括在Win7系统下安装shell和mkcert，生成证书，以及Vite的配置和项目运行。
摘要由CSDN通过智能技术生成

使用Vite构建工具，导致文件请求比较多，每个请求都需要三次握手四次挥手，而https可以多路复用，可以节约大量三次握手四次挥手时间，提升开发效率。
要想使用https协议，必不可少的是颁发证书这个步骤。

一、证书颁发

可以使用 OpenSSL 来操作一堆命令生成，这里使用更简单的工具mkcert

1、离线情况（win7系统）
a. 若没有shell工具，安装shell
如果使用的是win7，系统是没有自带shell工具，需要手动安装Windows Management Framework
下载地址若不可用，请自行百度
下载地址: https://download.microsoft.com/download/6/F/5/6F5FF66C-6775-42B0-86C4-47D41F2DA187/Win7AndW2K8R2-KB3191566-x64.zip
b. 下载 mkcert 工具
mkcert github地址：https://github.com/FiloSottile/mkcert
下载地址： https://github.com/FiloSottile/mkcert/releases 找到合适的下载包下载
c. 生成证书
  1. 打开PowerShell
  2. 将exe文件直接拉进shell，在后面添加 -install， 然后回车，如下：
    3. 


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Liuer_Qin
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vite-certificate:为vite的https开发服务提供证书

				
			

			

				

					04-01
				

			

		

		

			
				
证书
为vite的https dev服务提供证书。

			
		

	



                

              
                



	

		

			

				
					
vite-vue3.zip

				
			

			

				

					11-30
				

			

		

		

			
				
vite+vue3多页面项目架构，内含简单demo方便熟悉项目，包含vue-router+axios+vuex+element-plus，并内置rollup打包分析插件！下载项目后第一步安装依赖，第二步npm run dev启动项目

			
		

	



                


  
              

                


	

		

			

				
					
vite中配置 https 安全超文本网络协议

				
			

			

				

					weixin_43993776的博客
				

				

					10-18
					
					2418
					
				

			

		

		

			
				
https 的配置是相对安全的，但是需要购买证书，它是 SSL/TLS + HTTP 的安全超文本网络协议此版本配置的是在 vite 开发服务器上临时配置的 https 协议， 生产环境需要购买证书， 在nginx 中配置。

			
		

	





	

		

			

				
					
vite项目如何在本地启动https协议

					
最新发布

				
			

			

				

					Mr__proto__的博客
				

				

					07-01
					
					563
					
				

			

		

		

			
				
vite项目如何在本地启动https协议并且不校验ssl证书

			
		

	



		

			
		



	

		

			

				
					
Vite开启https

				
			

			

				

					czw15913934496的博客
				

				

					12-26
					
					1477
					
				

			

		

		

			
				
（1）新建文件夹来存放证书（这步可不做，但是生成的证书会在c盘中）（2）设置Chocolatey安装位置。（1）打开PowerShell。（3）安装Chocolatey。4、Vite配置https证书。1、安装Chocolatey。3、生成https证书。（2）执行命令生成证书。2、安装mkcert。

			
		

	





	

		

			

				
					
Vite 开启本地 https 服务

				
			

			

				

					qq_40868156的博客
				

				

					07-21
					
					4799
					
				

			

		

		

			
				
vite, 开启本地 https 服务，启用 https 协议，运行项目

			
		

	





	

		

			

				
					
vite开启https 及证书安装

				
			

			

				

					yuhaiyang11的博客
				

				

					08-22
					
					2840
					
				

			

		

		

			
				
vite开启https 及证书安装

			
		

	





	

		

			

				
					
vite项目配置本地开发使用https访问，3分钟搞定

				
			

			

				

					
				

				

					01-28
					
					8045
					
				

			

		

		

			
				
在开发过程中，有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，这里就介绍几种vite项目快速开启https访问的方式。

			
		

	





	

		

			

				
					
Vite+Vue3的在线考试系统.zip

				
			

			

				

					05-08
				

			

		

		

			
				
Vite+Vue3的在线考试系统.zip 技术栈 Vite Vue3 + Vue-Router4 + Pinia Axios ESLint + Prettier Commit Lint + Husky Element Plus + Tailwind CSS SCSS + SCSS-Typed-Modules pnpm 启动项目 # 开发调试 > pnpm ...

			
		

	





	

		

			

				
					
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考

				
			

			

				

					11-16
				

			

		

		

			
				
} function pageZoomIn() {  if (state.scale > 0.8) {  state.scale -= 0.1;  } } onMounted(() => {  pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js";  const loadingTask = pdfjsLib.getDocument...

			
		

	





	

		

			

				
					
1、openlayers和vite+VUE开发-起始

				
			

			

				

					01-20
				

			

		

		

			
				
本教程将结合这三个技术，讲解如何使用Vite和Vue进行OpenLayers应用的开发。  首先，我们来了解OpenLayers的基本概念。OpenLayers提供了一套完整的API，使得开发者可以轻松地在网页上加载、显示和操作来自不同来源的...

			
		

	





	

		

			

				
					
vite-web-wallet：Vite的官方网络钱包-https：x.vite.net

				
			

			

				

					02-05
				

			

		

		

			
				
vite-web-wallet（SPA）
先决条件
纱
建筑（Webpack）
 yarn run build 
开始
yarn install
 yarn run dev
 在资源管理器中访问： http://localhost:8081
分支命名规则
在分支dev/{version}/{function name}
 测试分支test
 分支dev/{version}上的固定版本
生产分公司production
 注意：开发分支从dev/{last_version} 。 如果dev/{last_version}不存在，请与master分开
例子
'dev/2.0.0/utf8' from 

			
		

	





	

		

			

				
					
vite-vcp:自以为是的Vite入门模板。 由Vitesse https提供

				
			

			

				

					03-14
				

			

		

		

			
				
Vue 3 +打字稿+ Vite
 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。
推荐的IDE设置
 +  。 确保在设置中启用vetur.experimental.templateInterpolationService ！
如果使用[removed]
 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。
TS中.vue导入的类型支持
由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码：
如果使用手掌
运行Volar: Switch TS Plug

			
		

	





	

		

			

				
					
vite+vue项目开启https

				
			

			

				

					qq_42543548的博客
				

				

					12-20
					
					1980
					
				

			

		

		

			
				
记录一下vite+vue开启https经验

			
		

	





	

		

			

				
					
在 vite 开发环境，使用https自签证书 --- mkcert

				
			

			

				

					时光留不住，毕竟东流去
				

				

					03-19
					
					1315
					
				

			

		

		

			
				
在 vite 开发环境，使用 https 自签证书 --- mkcert

			
		

	





	

		

			

				
					
本地调试https配置方法（vite配置版本）

				
			

			

				

					LACERBA
				

				

					04-06
					
					2229
					
				

			

		

		

			
				
有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，本次用到的插件是 mkcert的vite版本： vite-plugin-mkcert。

			
		

	





	

		

			

				
					
【VUE】项目本地开启https访问模式(vite4)

				
			

			

				

					无限循环
				

				

					08-07
					
					6641
					
				

			

		

		

			
				
在实际开发中，有时候需要项目以https形式进行页面访问/调试，下面介绍下非vue-cli创建的vue项目如何开启https。

			
		

	





	

		

			

				
					
关于 vue vite 项目中本地以及代理中开启https解决方法

				
			

			

				

					2301_79406343的博客
				

				

					03-08
					
					1817
					
				

			

		

		

			
				
关于 vue vite 项目中本地以及代理中开启https解决方法

			
		

	





	

		

			

				
					
vite 开启https

				
			

			

				

					06-01
				

			

		

		

			
				
要在 Vite 中开启 HTTPS，你需要在启动命令中使用 `--https` 参数。例如，使用以下命令启动 Vite：

```
vite --https
```

这将启用默认的自签名证书。如果你想使用自己的证书，可以使用以下命令：

```
vite --https ./path/to/cert.pem --key ./path/to/key.pem
```

其中 `./path/to/cert.pem` 和 `./path/to/key.pem` 是你的证书和密钥文件的路径。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值