vue在ie中页面空白
vue在ie中页面空白(同时解决vue-baidu-map不显示问题)
公司项目需求需要处理浏览器兼容性问题,谷歌,搜狗,360安全,360极速都没有问题,但在ie11中先出现vue页面不显示,问过度娘之后,项目解决步骤如下:
1. 使用vue-cli2.0在ie11中不显示问题(因为ie目前不支持es6语法,所以需要将es6语法转es5)
安装babel-polyfill
npm install --save babel-polyfill
引入babel-polyfill
分三种引入方式:
在main.js中引入,放置第一行,让其在所有源代码加载之前先加载当前配置
import ‘babel-polyfill’;
在webpack文件配置中使用
找到 build/webpack.base.conf.js 文件后,并在如下位置更改:
将 app: ‘./src/main.js’ 修改为 app: [‘babel-polyfill’,’./src/main.js’]// 找到当前位置并修改内容
module.exports = {
entry: {app: './src/main.js' // 初始状态
}
}module.exports = {
entry: {app: ['babel-polyfill','./src/main.js'] // 修改后状态
}
}在node.js 中:
require(‘babel-polyfill’)
经过多次测试,在我的项目中,我选择的是前两个中的其中一种方式使用
// 我的main.js放置位置
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
注意:进行完上面的操作后需要重新 npm run dev,然后刷新ie浏览器,如果没有效果,关掉浏览器,重新打开访问即可
页面进行以上操作后,如果还无法显示,则检查项目中有没有使用到 百度地图插件(vue-baidu-map)此时是因为vue-baidu-map文件包在node_modules文件中,但是在webpack编译时没有将当前文件编译进去,所以此时就需要修改webpack文件配置:
找到 build/webpack.base.conf.js 文件后,并找到文件配置位置
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
// include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] // 初始配置状态
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/vue-baidu-map/components')] // 修改后配置状态
}
]
}
由于当前修改属于webpack文件,所以在修改完配置后,需要重新启动 npm run dev 项目即可生效,此时就会发现ie11中地图能够正常显示了
如果此文对你有帮助,记得顺手点个赞,主要是踩坑记录一下,有什么问题,欢迎在评论区留言
还没有评论,来说两句吧...