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')]},
然后重启项目就可以了