vue在ie中页面空白

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

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

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

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

安装babel-polyfill

  1. 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: {

    1. app: './src/main.js' // 初始状态

    }
    }

    module.exports = {
    entry: {

    1. app: ['babel-polyfill','./src/main.js'] // 修改后状态

    }
    }

  • 在node.js 中:

    require(‘babel-polyfill’)

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

  1. // 我的main.js放置位置
  2. import 'babel-polyfill'
  3. import Vue from 'vue'
  4. import App from './App'
  5. import router from './router'

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

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

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

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

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

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

发表评论

表情:
评论列表 (有 0 条评论,274人围观)

还没有评论,来说两句吧...

相关阅读