IE浏览器访问Vue项目空白页面问题解决

之前写好的vue项目使用其他浏览器访问都没什么问题,今天使用IE浏览器访问时发现页面全空白现象,打开控制台后发现以下情况。
控制台错误
上百度搜索后,原因是IE无法解析ES6代码。
所以有如下解决方法:

安装babel-node包将ES6代码转为ES5:

npm install babel-node --save
安装好之后,在webpack.base.conf.js文件中进行如下配置:
在module.exports的entry中进行修改

module.exports = {
    externals: {
        vue: 'Vue',
        element: 'ElementUI',
        "v-charts": "VCharts",
    },
    context: path.resolve(__dirname, '../'),
    entry: {
    	//在这里将babel-polyfill添加进去
        app: ['babel-polyfill', './src/main.js']
    },

查看控制台错误信息后再进行设置

Alt
发现是node_modules/vue-baidu-map处出的问题。
在webpack.base.conf.js文件中继续修改

module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'),
                    resolve('test'),
                    resolve('node_modules/webpack-dev-server/client'),
                    //在此处插入下面这行代码,括号里的内容根据具体错误而定
                    resolve('node_modules/vue-baidu-map')
                ]
            },

最后重新npm start后可以IE浏览器可以正常访问。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值