1、 打开index.html一片空白

参考：链接: link.
修改build对象里的assetsPublicPath为’./’

assetsPublicPath: './'

2、ElementUI样式丢失

参考：链接: link.
这里尝试完前三种：

1.main.js样式引入顺序问题

调整了import的顺序（可能是被第三方组件样式覆盖了，router放在最后引入，就可以实现组件样式在第三方样式之后渲染）

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/reset.css'
import myBread from '@/components/cuscom/myBread.vue'
import router from './router'
import http from '@/plugins/http.js'
import moment from 'moment'

2.注释/build/webpack.prod.conf.js文件的代码

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),

因为webpack编译会发生css去重的问题，在打包的过程时会过滤掉重复的css类或样式代码，虽然有时候不重复的也会被过滤掉

3.添加使用范围样式

scoped是H5的新特性，它限制样式只适用于当前组件，避免组件间的样式干扰。

将所有<style>

修改为

<style scoped>

---

以上三步完成以后，页面能展示部分样式，效果如下：

图片:

可以看出图标样式不能正常显示
控制台报错情况如下：
Failed to load resource: net::ERR_FILE_NOT_FOUND

4.显示图标样式

webpack utils.js 修改：（build目录下utils.js）
添加 publicPath: ‘…/…/’

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

终于，所有样式都正常了 😃