vue在ie中页面空白

曾经终败给现在 2022-11-15 01:17 143阅读 0赞

## 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浏览器，如果没有效果，关掉浏览器，重新打开访问即可**

页面进行以上操作后，如果还无法显示，则检查项目中有没有使用到 [百度地图插件][Link 1]（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中地图能够正常显示了

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

[Link 1]: https://www.npmjs.com/package/vue-baidu-map