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']
    },

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

IE浏览器访问Vue项目空白页面问题解决_第1张图片
发现是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浏览器可以正常访问。

你可能感兴趣的:(IE浏览器访问Vue项目空白页面问题解决)