用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白

用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白

• 写下本文只是为了做笔记或以后遇到同样问题能快速解决.

• 用vue-cli的搭建项目可以参考官方文档 https://cli.vuejs.org/guide/#cli-service.

• 项目完成最终需要 npm run build 打包发布.在dev阶段用webserver打开是完全没有问题的。但是我在build之后发布到服务器上点击index.html,却是一片空白,在chrome 浏览器开发者工具上观察了下也没报错啥的,一脸懵。我dev阶段没问题，说明build和production 阶段除了问题。查了下资料，果然有很多人遇到过这样的问题。

• 修改build文件下 webpack.prod.conf.js(生产环境中用到的配置) 的 output 对象为
  

• 修改config文件下 util.js 的build（build文件时用到的配置） 对象为
  
  上面俩处修改意思均为将文件路径改为相对路径。

• mode 模式使用默认的 hash 模式。如果需要 history 模式还是会页面空白需要后端配合下，可以参考这篇文章 http://www.hehaibao.com/vue-router-history-problem/ 。

• 上面问题解决了页面不空变了，又发现了一个新问题，在IE 11 上竟然都打不开。看了下console 报错是关于promise的。于是继续配置。
  npm i babel-polyfill
  babel-polyfill 作用参考这篇：http://www.hangge.com/blog/cache/detail_1691.html
  npm i es6-promise
  es6-promise 作用：由于项目中用到了 axios ，axios是基于primise封装的，所以es6-promise 就是将 IE 不支持的 Promise 转换为能理解的语法。
  安装完成后还需要在项目中引入下才可以：
  在webpack.base.conf.js即基本配置中的 entry即入口引入 babel-polyfill .或者在项目的main.js中import 都是 ok 的.

  
  
  至此 发布后页面空白的问题和ie 不兼容的问题均解决.