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

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

发现是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
• 收藏
• 分享
• 文章举报