Vue和iview-admin搭建的项目进行兼容

几何心凉

已于 2022-12-31 21:11:30 修改

阅读量3.5w

点赞数 1

文章标签： vue.js view design javascript

于 2021-04-27 17:06:56 首次发布

本文链接：https://blog.csdn.net/JHXL_/article/details/116199975

版权

Vue 专栏收录该内容

47 篇文章 100 订阅

订阅专栏

本文介绍了如何处理基于Vue的iview-admin项目在360浏览器兼容模式下显示空白的故障。通过安装babel-polyfill，调整npm安装选项，更新webpack-dev-server至2.6.1版本，并在vue.config.js中配置babel-loader，来确保项目在IE内核下正常运行。尽管如此，由于IE8及以下版本不支持Vue，因此建议用户使用更高版本的浏览器，如谷歌浏览器。

摘要由CSDN通过智能技术生成

写在前面：

用iview-admin创建的基于Vue的项目，开发完成后，用户是使用的360浏览器，其中有两个模式，一个是极速模式（谷歌内核），一个是兼容模式（IE内核），，，，，咳咳，，IE前端伙伴的最爱，，，现在要问题是在360浏览器中的兼容模式下访问项目地址出现的是空白，解决方案如下

解决思路

最先想到的是安装 babel-polyfill

npm install babel-polyfill

安装的时候注意一下，小编最初使用的是 npm install babel-polyfill --save-dev，但是后面会有问题，这个可能加上后面的save是不一样的，有兴趣的可以自己去了解一下。

安装成功后我们要在main中去引入*切记引入在第一行

 import 'babel-polyfill'

在这里插入图片描述

引入后我们将在 vue.config.js 文件夹中配置以下内容

	      module: {
	        rules: [
	          {
	            test: /\.m?js$/,
	            include: [
	              resolve('src'), 
	              resolve('test'),
	              resolve('node_modules')
	            ],
	            use: {
	              loader: 'babel-loader',
	              options: {
	                presets: ['@babel/preset-env']
	              }
	            }
	          }
	        ]
	      }

在这里插入图片描述

到这呢，可以去重新运行一下，如果还不能展示我们继续下面

安装 webpack-dev-server的2.6.1版本

npm uninstall webpack-dev-server@2.6.1

写在最后

再次启动项目就可以了，但是会出现样式方面的混乱，让人很恶心，只能慢慢找解决的办法一点点的搞，还有更恶心的是360浏览器中是可以自己选择ie版本的，这样的话如果我们的用户选择ie8一下的版本，整个系统就崩溃了，因为ie8一下不支持Vue的核心内容，而且如果Vue要兼容ie9以上的版本也是很费力的。。。。。最终有一个直接的解决办法：说通用户直接下载谷歌浏览器