vue在ie中页面空白

vue在ie中页面空白（同时解决vue-baidu-map不显示问题）

公司项目需求需要处理浏览器兼容性问题，谷歌，搜狗，360安全，360极速都没有问题，但在ie11中先出现vue页面不显示，问过度娘之后，项目解决步骤如下：

1. 使用vue-cli2.0在ie11中不显示问题（因为ie目前不支持es6语法，所以需要将es6语法转es5）

安装babel-polyfill

npm install --save babel-polyfill

引入babel-polyfill

分三种引入方式：

• 在main.js中引入，放置第一行，让其在所有源代码加载之前先加载当前配置

import 'babel-polyfill';

• 在webpack文件配置中使用
  找到 build/webpack.base.conf.js 文件后，并在如下位置更改：
  将 app: ‘./src/main.js’ 修改为 app: [‘babel-polyfill’,’./src/main.js’]

// 找到当前位置并修改内容
module.exports = {
  entry: {
    app: './src/main.js'  // 初始状态
  }
}

module.exports = {
  entry: {
    app: ['babel-polyfill','./src/main.js'] // 修改后状态
  }
}

• 在node.js 中：

require('babel-polyfill')

经过多次测试，在我的项目中，我选择的是前两个中的其中一种方式使用

// 我的main.js放置位置
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'

注意：进行完上面的操作后需要重新 npm run dev，然后刷新ie浏览器，如果没有效果，关掉浏览器，重新打开访问即可

页面进行以上操作后，如果还无法显示，则检查项目中有没有使用到 百度地图插件（vue-baidu-map）此时是因为vue-baidu-map文件包在node_modules文件中，但是在webpack编译时没有将当前文件编译进去，所以此时就需要修改webpack文件配置：

找到 build/webpack.base.conf.js 文件后，并找到文件配置位置

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] // 初始配置状态
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/vue-baidu-map/components')] // 修改后配置状态
      }
    ]
  }

由于当前修改属于webpack文件，所以在修改完配置后，需要重新启动 npm run dev 项目即可生效，此时就会发现ie11中地图能够正常显示了

如果此文对你有帮助，记得顺手点个赞，主要是踩坑记录一下，有什么问题，欢迎在评论区留言