vue系列之----项目在ie浏览器中空白

具体现象

使用vue-cli脚手架搭建的项目，【npm run dev】运行，在chrome下正常显示，ie下显示空白。

问题原因

IE9-IE11 不兼容ES6语法，promise语法

问题解决

1. 下载安装包babel-polyfill、es6-promise

npm i @babel/polyfill'
npm i es6-promise

2. 在main.js中引入babel-polyfill

import '@babel/polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()

3.修改配置

vue2.0: 修改webpack.base.conf.js

 entry: {app: ["babel-polyfill", "./src/main.js"]},

vue3.0:修改vue.config.js文件

module.exports = {configureWebpack:{// 其他配置},chainWebpack: config => {// 其他配置config.entry('main').add('babel-polyfill') // main是入口js文件// 其他配置}
}

4.在index.html文件head标签中添加兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

配置完成依旧空白问题排查

若此时依旧空白，则可能是个别文件未转换到
这里通过add方法，配置babel需要另外转换的文件

// vue2.0 webpack.base.conf.js {test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('static') // 额外配置文件resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/v-charts/src'),resolve('node_modules/vue-awesome'),resolve('node_modules/element-ui/packages'),resolve('node_modules/element-ui/src')]
}

// vue3.0  根目录下新建 .babelrc 文件
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime"]
}//  vue3.0   修改 babel.config.js
module.exports = {presets: [['@vue/app',{useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]
}// vue3.0   修改vue.config.js
const path = require('path');function resolve(dir) {return path.join(__dirname, '.', dir);
}module.exports = {...  // 其他配置// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。// 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来transpileDependencies: ['node_modules/webpack-dev-server/client'],chainWebpack: config => {config.entry('main').add('babel-polyfill'), // main是入口js文件config.module.rule('compile').test(/\.js$/).include.add(resolve('src')).add(resolve('test')).add(resolve('static')) // 额外配置文件.add(resolve('node_modules/webpack-dev-server/client')).add(resolve('node_modules')).end().use('babel').loader('babel-loader').options({presets: [['@babel/preset-env', {modules: false}]]});}
}

写在最后的话，vue不支持ie8及以下版本, 具体原因自行查阅vue官网

vue系列之----项目在ie浏览器中空白相关推荐

解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
vue配置启动项目自动打开浏览器
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js,里面有一个配置是autoOpenBrowser:false: 设置为true即可(或者全局搜索autoOpen ...
vue支付宝html,vue 解决在微信内置浏览器中调用支付宝支付的情况
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转 ...
Vue项目在微信浏览器中使用支付宝支付
本人vue 小白之前在公司接触vue商城项目,其中包含了微信支付和支付宝支付,由于微信会拦截支付宝支付页面.当时这个问题困惑我蛮久的,所以今天记录一下,方便日后再次遇到方便查询. 废话不多说. 给兄 ...
VUE无需上传，在浏览器中查看xlsx或xls表格
xlsx-to-table 无需上传,在浏览器中查看xlsx或xls表格,由js-xlsx驱动. 在vue-xlsx-table基础上开发,(为了获得完整表头)修改为即使某一列没有数据也获取表头,给列 ...
vue项目在ie浏览器中不兼容问题的处理
安装babel-polyfill 插件 npm install --save-dev babel-polyfill 或者 npm install babel-polyfill --save-dev 或 ...
解决vue项目在ie浏览器中不显示的问题
安装 "babel-polyfill" npm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill - ...
laravel+vue.js的学习以及为什么浏览器中要有井号“#”
一.前言一直想找机会学一下vue,但是go还没来得及学,laravel的源码还没看完,学习vue更是遥遥无期.幸好新公司的项目是用laravel+vue编写的,这才有幸接触到vue. 但是我在观看项 ...

vue系列之----项目在ie浏览器中空白

具体现象

问题原因

问题解决

1. 下载安装包babel-polyfill、es6-promise

2. 在main.js中引入babel-polyfill

3.修改配置

vue2.0: 修改webpack.base.conf.js

vue3.0:修改vue.config.js文件

4.在index.html文件head标签中添加兼容

配置完成依旧空白问题排查

vue系列之----项目在ie浏览器中空白相关推荐

最新文章

热门文章