解决vue项目在ie、360兼容模式下空白页面问题

完美解决vue项目在ie、360兼容模式下空白页面,并提示语法错误的原因

艰难路程

事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解决问题。本人菜鸟一枚,以至于看了很多博文,一个一个去试过,结果很多都是因为项目的差异性导致了不成功。
此博文用于记录解决问题,用于参考。

解决办法

总所周知,ie和360兼容模式是神坑!这俩玩意不合群还很傲娇,常常是别的浏览器能正常,它俩就对你爱理不理,下面提供一些棍棒教育的方法:

  1. 需要下载对应的支持包
//  安装 babel-polyfill
npm install --save babel-polyfill
//  安装 es6-promise 
//  这里主要是为了解决代码es6新特性兼容问题
npm install es6-promise --save
  1. 引用
    在根目录下main.js引入
import 'babel-polyfill'

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()

Es6Promise.polyfill()
  1. 在根目录下的babel.config.js添加如下代码:
    声明:一般你上面导入babel-polyfill这个包,都会自动创建babel.config.js这个文件,如果没有就手动创建,再替换掉里面的原有代码哈。
module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
}
  1. 配置vue.config.js
    同样是在根目录下,当然这里有差异性,有的博文是在webpack.base.conf.js下面配置的,看自己的项目灵活添加咯。
    4-1.在configureWebpack的代码块里面引入如下配置:
// 解决iview与IE浏览器的兼容性:
    module: {
      rules: [
        // 'transform-runtime' 插件告诉 Babel
        // 要引用 runtime 来代替注入。
        {
          test: /\.m?js$/,
                    // exclude用上面配置的話,默认过滤不编译node_modules 下的文件
          // include 指定需要编译的文件路径
          include: [ 
          // 根据需求导入 , (如有elment的就可以引入,没有就没必要了)
            resolve('src'),
            resolve('test'),
            resolve('node_modules/webpack-dev-server/client'),
            resolve('static'),
            resolve('node_modules/resize-detector/esm'),
            resolve('node_modules/element-ui/src'),
            resolve('node_modules/element-ui/packages'),
            resolve('node_modules/tree-table-vue/lib'),
            resolve('node_modules/v-org-tree/dist'),
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }

4-2.在configureWebpack的代码块里面的chainWebpack代码块引入如下配置:

chainWebpack(config)这里有差异,有些是chainWebpack:config =>
原因可能是vue版本不一样~
chainWebpack(config) {
	config.entry('main').add('babel-polyfill')
    }

  1. 重启
    重启项目:npm run dev

  2. 收工跑路

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值