解決vue+elementui項目打包后樣式變化問題

最近在搭建一個vue+ElementUI+Vuex項目，打包時發現了有幾個問題，解決后特地記錄一下，以免下一次有遇到類似的問題。

 問題一

1.頁面一片空白並報錯Failed to load resource: net::ERR_FILE_NOT_FOUND 

第一次打包后發現頁面一片空白，並且報錯Failed to load resource: net::ERR_FILE_NOT_FOUND 

 

然后上網發現更改一下配置就行了。

1.webpack.prod.conf.js 中output添加參數publicPath:'./'

 

 

 

 2.修改webpack.base.conf.js中：

publicPath: process.env.NODE_ENV === 'production'

? './' +config.build.assetsPublicPath

: './' + config.dev.assetsPublicPath

 

 

 

3.如果還有問題：找到config文件里面的index.js文件
修改build里面的assetsPublicPath；

 

 我是第三步本來就已經是這樣設置的所以，第三步沒有更改。

然后打包，頁面就不再是一片空白了。

但是有出現了新的問題，發現部分Element UI 樣式失效，如下圖,icon變成方框了

 

 解決辦法：在build文件夾下找到utils.js，加上一行publicPath：'../../'

 

 

然后再打包，打開index.html文件就能看到圖標正常顯示啦。

問題二

vue+elementui項目打包后,我發現打包整體樣式沒有問題，局部頁面樣式樣式變成了elementui自帶的樣式,自己在組件里修改過的樣式沒有生效。
問題原因: main.js中的引入順序決定了打包后css的順序，如果先引入router,后引入第三方組件的話,第三方組件樣式可能就會將組件內的樣式覆蓋。
解決辦法: 調整引入順序,先引入第三方組件，再引入router，就能實現組件樣式在第三方樣式之后渲染。

代碼如下:
main.js

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import Axios from 'axios'