JCAL123 2024-08-05 16:57 采纳率: 0%
浏览 28

vue2项目引入babel-polyfill后在ie浏览器下依然白屏

基于vue/cli4.5搭建的vue2项目,引入了babel-polyfill后,在ie浏览器下依然白屏,相关配置如下
package.json

img

vue.config.js

img

babel.config.js

img


.browserslistrc

img

  • 写回答

1条回答 默认 最新

  • Nymph_Zhu 2024-08-05 17:24
    关注

    1.在main.js 文件中引入:import 'babel-polyfill';
    2.vue.config.js 中,在 chainWebpack 内添加以下代码:

    chainWebpack: config => {
      config.entry('main').add('babel-polyfill')
      config.entry.app = ['babel-polyfill', './src/main.js']
    }
    
    

    3.在 babel.config.js 中配置:

    module.exports = {
      presets: [
        ['@vue/app', {
          polyfills: [
            'es6.promise',
            'es6.symbol',
            'es6.array.iterator',
            'es6.object.assign',
          ],
          useBuiltIns: 'entry',
        }],
      ],
    }
    

    4.在 vue.config.js 文件中新增配置 transpileDependencies
    如果除了项目还引入了其他插件而该插件内部也存在ES6写法,则需要将这些插件的ES6转换成ES5,使用transpileDependencies直接将需要转换的插件放入

    transpileDependencies: [
        'element-ui', 'vant', 'js-cookie', 'vxe-table', 'xe-utils','vue-virtual-scroll-list','vue-socket.io'
      ],
    
    评论

报告相同问题?

问题事件

  • 创建了问题 8月5日