vue在ie中页面空白-蒲公英云

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')] // 修改后配置状态
      }
    ]
  }