写在前面:

用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以上的版本也是很费力的。。。。。 最终有一个直接的解决办法:说通用户直接下载谷歌浏览器

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐