vue-cli2 es6兼容问题导致白屏

vue-cli2 es6兼容问题导致白屏

关于vue的项目，在浏览器上打开白屏的情况，大部分是因为es6语法不兼容导致的，下边说一下解决办法。

解决方法

1、安装 babel-polyfill es6-promise包

npm i babel-polyfill es6-promise --save

2、 然后在main.js中添加如下：

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

注意:import ‘babel-polyfill’ 引入要在 import Vue from ‘vue’ 之前；

3、在 webpack.base.conf.js中添加如下：

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

如果配置完还是白屏的情况，很有可能是刚添加的第三方依赖有es6语法。babel-polyfill是不检测 node_modules 中的es6，所以需要我们手动添加。比如我新加的依赖是swiper

解决方法

修改 webpack.base.conf.js文件中， babel-loader的配置：

{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/swiper') ,resolve('node_modules/webpack-dev-server/client')]},

然后重启项目就可以了

vue-cli3 ES6语法不兼容导致白屏大概率也是第三方依赖包的原因，附上解决办法