首先我们从最基础开始排查
1.你的项目是否编译了es6语法:
怎么才能知道报的什么错呢?请点击
那是因为webpack-dev-server在2.8.0版本开始就有es6语法的js了,低版本的浏览器或设备对es6的兼容还是比较差的,会出现白屏或打不开;
解决方案:↓
把webpack-dev-server降低,2.7.1版本刚刚好;
npm rm webpack-dev-server -D
npm i webpack-dev-server@2.7.1 -D
- 第一步:npm 安装
- npm install babel-polyfill
- npm install es6-promise
- 然后
- package.json中会出现下面这两行,注意查看下,根据不同时间版本号会不同的,重点是前面
- "babel-polyfill": "^6.26.0",
- "es6-promise": "^4.1.1",
- 第二步:main.js引入
- import 'babel-polyfill'
- import Es6Promise from 'es6-promise'
- require('es6-promise').polyfill()
- Es6Promise.polyfill()
- 第三步:更改 webpack.base.conf.js 文件中的入口
- entry: {
- app: ["babel-polyfill", "./src/main.js"]//改为最新的这行入口
- // app: ‘./src/main.js’
- },
- 第四步:修改.babelrc文件
- { "presets": ["es2015" , "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
- 第五步:webpack.base.conf.js 中修改
- {
- test: /\.js$/,
- loader: 'babel-loader',
- query: {
- presets: ['es2015']
- },
- include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
- }
如果还不行,请往下看
2.你可能报了Use of const in strict mode错误怎么才能知道报的什么错呢?请点击
Console
那是因为webpack-dev-server在2.8.0版本开始就有es6语法的js了,低版本的浏览器或设备对es6的兼容还是比较差的,会出现白屏或打不开;
解决方案:↓
把webpack-dev-server降低,2.7.1版本刚刚好;
npm rm webpack-dev-server -D
npm i webpack-dev-server@2.7.1 -D
如果还没解决,在往下看
3.如果还没解决,那你可能用了iview框架,而且是按需引用 的组件,
解决方案:在你的webpack.base.conf.js里添加
{
test: /iview.src.*?js$/,
loader: 'babel-loader',
},
改成全局引用也可以,iview按需加在不会进行es6的编译,只有全局引用了才会被认为是你的代码编译成es5语法;