出現打包后icon圖標變成小方塊的原因只有兩個
一。element-ui版本和element-ui/lib/theme-chalk/index.css版本不一致。
解決辦法:
卸載已經有的element-ui
npm uninstall element-ui
然后在安裝新的
npm install element-ui
二。打包后的 element-icons.woff 和element-icons.ttf 字體文件路徑錯誤
我的訪問路徑多了css/static/fonts/
結果就變成了dist/static/css/static/fonts/element-icons.535877f.woff (錯誤路徑)
網上搜了半天所有的答案好像都是復制的一樣。。。。。。。
都是大概如下這樣:
當然如果你的問題這兩部就可以解決的話那當然很好。
可是我的vue配置的generateLoaders()方法里沒有 ExtractTextPlugin.extract()
我的 generateLoaders()方法如下,
通過 MiniCssExtractPlugin.loader配置如下
我本地親測:
然后 webpack.base.conf.js
最后在打包之后的dist文件夾如下:
訪問字體文件的路徑也變成了如下:
完美解決。為了解決這個問題花費了點時間。希望我的幫助可以節省點你的時間。