部署项目的问题（一）—— vue工程打包上线样式错乱问题

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)
    }

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