1.安装相关插件
yarn add @babel/polyfill
yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise --dev
2.修改根目录下的文件 babel.config.js(没有自己建立)
const plugins = ["@babel/plugin-transform-runtime"];
//发布环境移除console
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
plugins.push("transform-remove-console")
}
module.exports = {
presets: [
[
"@vue/app",
{
"useBuiltIns": "entry",
polyfills: [
'es6.promise',
'es6.symbol'
]
}
],
"@babel/preset-env"
],
plugins: plugins
};
3.创建/修改根目录下的文件 vue.config.js：
module.exports = {
// 显式转义依赖
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: config => {
// 指定入口 es6转es5
config.entry.app = ['babel-polyfill', './src/main.js'];
}
}
4.入口引入相关插件 src/main.js
// 解决ie白屏问题
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
