前面可能跟大家一样,按照网上最普遍的方法,进行了安装和配置:
- 根目录下新建 .babelrc 文件
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
2.修改 babel.config.js
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
]
}
- 修改 vue.config.js
module.exports = {
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: config => {
config.entry.app = ['@babel/polyfill', './src/main.js'];
}
}
4.修改 main.js 文件
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
- 安装依赖
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill babel-plugin-transform-remove-console
按照网上的说法,到这里为止,IE页面空白问题就已经解决了,但是,我的项目在IE和安卓低版本上打开仍然是空白,查了很多方法,试了很多方法都不管用,最终在茫茫大海中,捞到了一位大神,在此附上原po,以表敬意
https://blog.csdn.net/Maggie_01/article/details/101159448
上解决方法:
修改vue.config.js
这里通过add方法,配置babel需要另外转换的文件
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '.', dir);
}
module.exports = {
... // 其他配置
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
// 如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
transpileDependencies: ['node_modules/webpack-dev-server/client'],
chainWebpack: config => {
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
}]
]
});
}
}
至此,IE、安卓5.1、安卓6.0上页面都能正常访问了