vue在ie中页面空白

最新推荐文章于 2023-09-26 14:31:23 发布

苏立行

最新推荐文章于 2023-09-26 14:31:23 发布

阅读量576

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44348138/article/details/115328603

版权

针对IE11浏览器兼容性问题，通过引入babel-polyfill转换ES6语法，可以解决Vue页面不显示的问题。具体解决步骤包括在main.js中或webpack配置中引入babel-polyfill，重新编译项目。对于vue-baidu-map插件不显示，需在webpack配置中添加对应的include路径，确保其被正确编译，最后重启项目生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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