Vue-cli3.0浏览器兼容配置问题

最新推荐文章于 2024-08-14 08:30:00 发布
最新推荐文章于 2024-08-14 08:30:00 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： 前端 vue-cli 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_hwb/article/details/106273695
版权
本文详细介绍了在Vue-cli3.0项目中如何配置browserslist、Polyfill和现代模式，确保项目的浏览器兼容性。通过browserslist指定目标浏览器范围，@vue/babel-preset-app处理polyfill，现代模式则帮助优化现代浏览器的加载性能，同时讨论了CORS和CSP的配合使用。
摘要由CSDN通过智能技术生成

本文讲一讲自己在工作过程中针对vue-cli3.0项目兼容性配置的学习和应用。

1.browserslist

在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。

在 package.json 中：

"browserslist": [
    "defaults",
    "not IE 11",
    "not IE_Mob 11",
    "maintained node versions",
  ]

在 .browserslistrc 中：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  前端小学生hwb
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
创建vue-cli3.0及以上版本项目

				
			

			

				

					m0_37825704的博客
				

				

					09-24
					
					359
					
				

			

		

		

			
				
1.安装node,vue-cli3.0要求node版本8或者更高，查看node版本 node -v

2.安装vue-cli

npm install -g @vue/cli

卸载vue-clinpm uninstall -g @vue/cli

查看vue-cli版本 vue -V （如图1）



图1

3.创建项目 vue create daping (daping 为自己项目的名称)，按下箭头，选择最后一个自定义配置（如图2）



图2

可以按电脑上下箭头进行选择，使用空格键选中或...

			
		

	



                

              
                



	

		

			

				
					
Vue3 搭建遇到版本兼容问题

				
			

			

				

					w2369110547的博客
				

				

					11-14
					
					588
					
				

			

		

		

			
				
因为版本问题可能axios里面语法在高版本的vue3里可能会出现一些无法识别的语法，就需要我们去手动修改。这个问题会导致运行成功了，但是页面为空白页面。启动控制台不会报错但是在浏览器控制台会报错一个。，运行项目的时候，会发出警告但是项目能运行成功，但还是会出问题的。所以在这里我们就调整语法结构，采用main.js的结构去处理。我安装的axios，它的axios.js是。首先就是导入和调用的区别。然后再运行就可以解决了。

			
		

	



                


  
              

                


	

		

			

				
					
vue-cli3项目浏览器兼容问题，在低版本系统中白屏

				
			

			

				

					web前端学习总结
				

				

					12-02
					
					2868
					
				

			

		

		

			
				
vue-cli3项目浏览器兼容问题，在低版本系统中白屏
vue-cli3 中自带 babel-polyfill ，会将es6语法转化成es5 语法。但是如果依赖中有es6， polyfill是不能检测出来的。官网解释：



处理办法：
如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
比如我新加的依赖为swiper, 在 vue.confi

			
		

	





	

		

			

				
					
【vue】浏览器兼容相关

					
最新发布

				
			

			

				

					weixin_47351913的博客
				

				

					08-14
					
					1341
					
				

			

		

		

			
				
Vue.js 3.x 更加关注现代浏览器，而 Vue.js 2.x 则提供了更广泛的浏览器支持。如果你的应用需要支持较旧的浏览器，可以选择 Vue.js 2.x 或者在 Vue.js 3.x 中使用适当的配置来实现兼容性。Vue.js 是一个流行的前端 JavaScript 框架，它支持构建单页应用和复杂的用户界面。如果你使用的是 Vue CLI 创建的项目，可以通过修改 babel.config.js 文件来配置 Babel 转译规则。使用 Babel 转译 ES6+ 代码。使用 polyfills。

			
		

	



		

			
		



	

		

			

				
					
vue兼容IE11浏览器空白页等一系列问题之踩坑全过程

				
			

			

				

					deciduous_leaves的博客
				

				

					03-31
					
					4709
					
				

			

		

		

			
				
兼容IE对于一个菜鸡前端来说，简直是噩梦般的存在。我先哭为敬！😭😭😭

好了，话不多说，摸索中解决问题之路即将开启，我们准备出发～👊（建议将文章全部看完之后再进行尝试，因为中间有很多尝试没有成功）

重要提醒：

1、改完代码记得清浏览器缓存，再去看结果，尤其是在坚信自己写得没错的时候，不行就把浏览器关了再打开（好几次都是清完缓存没反应，关了重新打开就好了，就很迷）

2、安装依赖时能用npm就别用cnpm，别问我为什么🙄️

问题产生原因及解决思路：IE浏览器不能显示vue页面，主要原因是IE无法读取es

			
		

	





	

		

			

				
					
兼顾浏览器兼容性标准

				
			

			

				

					网络隐士的专栏
				

				

					02-21
					
					1447
					
				

			

		

		

			
				
OS/Browswer CompatibilityrequiredWindows/Netscape 4.XNWindows/Firefox 1.0YWindows/OperaNMac/IE 4.5YMac/Netscap 4.XNMac OSX/Safari 1.0

			
		

	





	

		

			

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

				
			

			

				

					weixin_52283095的博客
				

				

					01-21
					
					3921
					
				

			

		

		

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

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

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



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

以上为支持的版本介绍

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

Edge: Edge
.

			
		

	





	

		

			

				
					
vue-multi-page:一个基于vue-cli3.0的多页面的，适配移动端的基础脚手架

				
			

			

				

					05-01
				

			

		

		

			
				
vue-cli3.0的源码中，已经自带多页面配置的源码了。在文档中，也明确说明可以直接在pages属性上进行配置。 在根目录新建vue.config.js配置文件，这样配置即可。 module.exports = {  pages: {  index: {  // entry ...

			
		

	





	

		

			

				
					
vue-cli3.0配置demo更新

				
			

			

				

					07-23
				

			

		

		

			
				
在 "vue-cli3.0配置demo更新" 中，我们将探讨 `vue.config.js` 文件的详细配置，以及如何配置别名、代理跨域和 devServer。  `vue.config.js` 是 Vue CLI 3.x 中的核心配置文件，允许开发者自定义项目的构建设置。在...

			
		

	





	

		

			

				
					
vue-cli3.0项目搭建，项目结构和配置

				
			

			

				

					Coderbook的博客
				

				

					10-19
					
					1032
					
				

			

		

		

			
				
这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于webpack和webpack-dev-server之上（提供 如：serve、build和...

			
		

	





	

		

			

				
					
Vue3有哪些不向下兼容的改变

				
			

			

				

					m0_61040489的博客
				

				

					04-12
					
					722
					
				

			

		

		

			
				
??全局API。

			
		

	





	

		

			

				
					
Vue3-浏览器兼容性 IE篇

				
			

			

				

					One is never too old to learn
				

				

					04-05
					
					1万+
					
				

			

		

		

			
				
检测IE浏览器 浏览器兼容性

			
		

	





	

		

			

				
					
错误解决in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your styles

				
			

			

				

					PHP、go程序员实例学习记录
				

				

					06-05
					
					315
					
				

			

		

		

			
				
错误解决in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your styles

			
		

	





	

		

			

				
					
vue 解决ie11兼容问题

					
热门推荐

				
			

			

				

					fighting2020的博客
				

				

					10-29
					
					3万+
					
				

			

		

		

			
				
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser
①npm install --save-dev babel-polyfill
②在main.js中引入 import "babel-polyfill"
③在build文件夹中webpa

			
		

	





	

		

			

				
					
性能提升简版

				
			

			

				

					weixin_34392906的博客
				

				

					08-01
					
					65
					
				

			

		

		

			
				
性能提升：gzip压缩；CDN服务；资源合并与压缩；代码分割图片压缩和懒加载又拍云针对html/css/js，默认开启gzip压缩，压缩比率大约70%（这里也可以自行设置，毕竟gz解析也耗时），cdn缓存时间可自行配置；这一点就解决了前两项；有关资源合并和压缩多是为了减少http请求和减少传输量，这个视项目设置；用的是webpack配置好的模板：assetsPublicPath：“”//你的cdn...

			
		

	





	

		

			

				
					
Vue CLI 浏览器兼容性

				
			

			

				

					ivenqin的博客
				

				

					09-15
					
					853
					
				

			

		

		

			
				
浏览器兼容性
关于浏览器的兼容我们可以从下面一些内容来了解与认识：
Vue CLI 3初始化的项目，你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
我们通常只需要修改browserslist就可兼容目标浏览器：
"browsersli

			
		

	





	

		

			

				
					
vue项目在多款浏览器下的兼容测试

				
			

			

				

					qq_44813770的博客
				

				

					05-11
					
					740
					
				

			

		

		

			
				
使用不同版本的浏览器进行测试：不同版本的浏览器可能会对 Vue3 项目的兼容性产生影响，因此需要使用不同版本的浏览器进行测试。例如，在 Chrome 浏览器中，你可以使用 DevTools 中的 Device Mode 来模拟不同设备和浏览器版本。使用在线兼容性测试工具：还有一些在线兼容性测试工具可以帮助你测试你的 Vue3 项目在多个浏览器中的兼容效果，例如 BrowserStack、CrossBrowserTesting、Sauce Labs 等等。未实施，仅是记录下答案。

			
		

	





	

		

			

				
					
如何友好提示vue3.0不再支持IE11及以下的浏览器版本

				
			

			

				

					LiAly66的博客
				

				

					03-15
					
					3880
					
				

			

		

		

			
				
如何友好提示vue3.0不再支持IE11及以下的浏览器版本

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值