vue3+ts+vite4兼容低版本详细版（已在谷歌70,60测试）

最新推荐文章于 2024-08-09 09:33:41 发布
最新推荐文章于 2024-08-09 09:33:41 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： 前端实战开发 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/136005806
版权
本文介绍了如何使用 @vitejs/plugin-legacy 插件来实现Vite3+TypeScript构建的应用在低版本浏览器（如Chrome 70和60）中的兼容性。内容包括安装插件、配置vite.config.js以及插件在打包过程中的作用，如转换为ES5代码、生成SystemJS包装和响应式HTML文件，确保旧版浏览器的兼容性。
摘要由CSDN通过智能技术生成

官网地址传送门：http://www.vitejs.net/plugins/
使用：@vitejs/plugin-legacy
1.在
当前vite版本、当前node版本在这里插入图片描述

1.安装插件（用的是node14版本）
2.在vite.config.js中配置如下

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

build: {
   target: ['ios11', 'Chrome 64']
},
plugins: [
   legacy({
     targets: ['Chrome 64'],
     modernPolyfills: true,
   })
],

3.在线上部署，查看
vite文件


                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  可可鸭~
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
vue3+vite适配低版本浏览器(只在谷歌65版本测试了)

				
			

			

				

					honghongzZ的博客
				

				

					12-19
					
					3724
					
				

			

		

		

			
				
项目框架采用的若依的vue3+vite4,打包发布后发现在低版本谷歌浏览器中报错页面进不去。

			
		

	



                

              
                



	

		

			

				
					
Vue3 + Typescript 兼容低版本 Chrome

				
			

			

				

					Tine Aine
				

				

					12-30
					
					7873
					
				

			

		

		

			
				
最近新开一个项目，使用了最新的Vue3和Typescript，但发现在客户浏览器中白屏（空页面），得知他们使用的浏览器版本居然是Chrome 49，但客户太多，根本无法要求他们统一更换新版本的浏览器，只能考虑适配这种低版本的浏览器。
一般这种情况都需要通过Babel去做转换，我们是Vue3 Cli项目，实际上Vue项目在创建时就引入的Babel，直接使用即可
修改浏览器兼容列表配置(.browserslistrc)
项目根目录下有一个.browserslistrc文件，打开，通过井号注释掉原先的内容，改为：

			
		

	



                


  
              

                


	

		

			

				
					
Vite 创建 Vue3 + TS 项目

				
			

			

				

					洛*璃的博客
				

				

					07-11
					
					628
					
				

			

		

		

			
				
在本文中，博主将详细讲述如何使用 Vite 搭建一个Vue3 + TS 的前端项目

			
		

	





	

		

			

				
					
vue3+vite适配低版本谷歌浏览器；vue3浏览器兼容性处理

				
			

			

				

					i_am_a_div的博客
				

				

					05-16
					
					3576
					
				

			

		

		

			
				
vue3+vite适配低版本浏览器

			
		

	



		

			
		



	

		

			

				
					
vue/cli脚手架搭建的vue3项目兼容低版本谷歌浏览器

				
			

			

				

					qq_39196447的博客
				

				

					10-08
					
					863
					
				

			

		

		

			
				
找到项目中的.browserslistrc文件，增加一行。chrome >48  （版本号可以自行修改）

			
		

	





	

		

			

				
					
vue3.0+TS 报错： SyntaxError: Unexpected token .

				
			

			

				

					qq_19529009的博客
				

				

					01-10
					
					751
					
				

			

		

		

			
				
提示：SyntaxError: Unexpected token  .

			
		

	





	

		

			

				
					
Vue3兼容低版本浏览器（ie11，chrome63）

				
			

			

				

					chajinglong的专栏
				

				

					05-29
					
					2607
					
				

			

		

		

			
				
为了使你的项目兼容 Chrome 63，你需要确保包含适当的 polyfills 和插件配置。插件，但在代码中可能缺少一些配置或插件顺序有问题。build构建的时候，可能会出现内存溢出的情况，以下构建调整最大内存大小。中被正确引入和配置。

			
		

	





	

		

			

				
					
Vue2兼容低版本浏览器

				
			

			

				

					txl910514的专栏
				

				

					02-28
					
					3296
					
				

			

		

		

			
				
注意：因为 @vitejs/plugin-legacy 只在 build 模式下生效，这也意味着 dev 模式下不经过 @vitejs/plugin-legacy 处理，所以 dev 模式下无法在低版本浏览器上运行。温馨提示：现在 Vue2 也可以使用组合式 api 了，具体参考：https://www.npmjs.com/package/@vue/composition-api。注意：必须使用新的 @vitejs/plugin-vue2 插件，否则  将无法正常使用！

			
		

	





	

		

			

				
					
chrome vue 未响应_vue兼容低版本chrome

				
			

			

				

					weixin_39941732的博客
				

				

					02-01
					
					2569
					
				

			

		

		

			
				
做项目遇到了一些不能轻易升级chrome版本的客户，他们还用着40版本的chrome，所以今天就来说说为了兼容低版本的chrome做了哪些努力。主要是两件事情：(1)将自己代码转为es5版本(2)将node_modules中引用的插件，有需要的部分转为es5版本转自己的配置自己的代码我们需要用到一个新的插件babel-polyfill(1)安装由于这个需要在你的源码之前使用，我们需要将其安装为de...

			
		

	





	

		

			

				
					
vue兼容低版本浏览器

				
			

			

				

					shengsaihong的博客
				

				

					07-09
					
					1787
					
				

			

		

		

			
				
1、babel-polyfill

npm install --save babel-polyfill

在main.js 头部引入import "babel-polyfill";

2、引入babel-polyfill后，有时编译还会报错：

Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

基本上是vue引入了第三方插件包含es6语法，但没有配置采用babel-l.

			
		

	





	

		

			

				
					
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

				
			

			

				

					xxxzzzqqq_的博客
				

				

					03-15
					
					2185
					
				

			

		

		

			
				
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

			
		

	





	

		

			

				
					
带你玩转 Vite + Vue3 高低版本常用玩法

				
			

			

				

					xdpcxq的专栏
				

				

					12-12
					
					1825
					
				

			

		

		

			
				
如此循环往复，严重影响开发人员的效率。当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务，如果项目很大，导致的一个必然结果就是，服务启动很慢，热更新很慢，效率降低。问题原因：低版本 Vite 的执行 preview 预览时，使用的 proxy 是 server 中的 proxy 配置，官方文档中提供的 preview 的 proxy 无效，这是低版本 Vite 的一个 bug，高版本已经修复，github 上有相关的 issue，也可以通过源码查看。

			
		

	





	

		

			

				
					
vite3+vue3 项目打包优化

				
			

			

				

					前端知识分享喵
				

				

					05-16
					
					2015
					
				

			

		

		

			
				
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

			
		

	





	

		

			

				
					
vue3 兼容低版本浏览器 @vite/plugin-legacy

					
最新发布

				
			

			

				

					夏微微的博客
				

				

					08-09
					
					496
					
				

			

		

		

			
				
测试谷歌版本79.0.3945.79 出现如下报错 且页面打不开。再配置 vite.config.ts。

			
		

	





	

		

			

				
					
关于浏览器兼容问题的处理

				
			

			

				

					weixin_52283095的博客
				

				

					01-21
					
					3892
					
				

			

		

		

			
				
本项目(使用的是Vue3.0+ts+Element-plus1.1.0-beta12)在处理浏览器兼容性问题时发现,部分浏览器出现不可打开.

首先,需要支持的主流浏览器为以下这几个浏览器: Edge,谷歌,搜狗,极速360,双核浏览器,safari浏览器,火狐浏览器和2345浏览器.

elemnet-plus支持的浏览器版本为:



由于Vue3不再支持IE11,所以Element plus也不再支持.

以上为支持的版本介绍

接下来,我们再看一下需要支持的几个浏览器内核

Edge: Edge
.

			
		

	





	

		

			

				
					
vue/cli或者vite脚手架搭建的vue3项目兼容低版本谷歌浏览器

				
			

			

				

					xuliqi666的博客
				

				

					01-11
					
					2435
					
				

			

		

		

			
				
当vue3项目打包上线后，最新版本的谷歌浏览器可以正常访问项目，但是低版本的谷歌浏览器打开页面后是空白页，控制台会有报错。

			
		

	





	

		

			

				
					
vue3+ts+webpack兼容低版本谷歌浏览器

				
			

			

				

					treasurecp的博客
				

				

					05-09
					
					560
					
				

			

		

		

			
				
修改三个文件。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
可可鸭~

			
想吃糖~我会甜

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值