vue-cli,webpack,iview使用错误总结

本文提到的错误写于出现于2018-2-1

1.问题如下

系统开发出来需要放到微信公众号中运行,开发完成后,出现pc端微信打开页面白板,iphone6部分机型,mac的safari都是页面白板,后面会附上package.json

2.问题解决

(1)我自己的问题

问题:

- 我代码中含有es6语法
- 我的js文件写入了static文件夹下了,webpack不会吧static下的js文件编译,所以,上述不支持es6的老爷机会不能运行,导致页面白板

解决:

将static下的js文件全部放入src目录下,这样npm run build会编译js文件并转换为es5; 同时建议使用stylus,less等的也注意点这个问题

(2)使用了axios出现的问题

问题:

因为axios使用了promise,所以ie下是没有promise对象的,这里需要兼容

解决:

- npm install babel-ployfll --save-dev
- 在main.js的头部import 'babel-polyfill';
- 在webpack.base.conf.js中配置
module.exports = {
  entry: {
    app:["babel-polyfill", "./src/main.js"]
------------------------------------
  }
}

(3)Vue替换express为webpack-dev-server,版本问题

问题:

webpack-dev-server版本过高,导致部分es6代码没有被编译成功,需要降级为2.6.1

解决:

npm uninstall webpack-dev-server
npm install webpack-dev-server@2.6.1 --save-dev

(4)iview按需引入问题
问题:

iview官方按需引入的方法是
npm install babel-plugin-import --save-dev
然而,问题就在这个babel-plugin-import上,在ie中,mac中,老板iphone中都不能访问,又没有查到怎么升级或者降级

解决:

卸载babel-plugin-import
采用全局引入iview

3.总结

• 有错误,还是学了一些东西的……
• 使用成熟的框架,不要使用用户量小的,使用少的框架
• 使用前,项目框架定型后,要在主要使用的平台测试一下,否则可能是白干活