之前写好的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']
},
查看控制台错误信息后再进行设置
发现是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浏览器可以正常访问。