第一：使用element框架的icon時候，開發(fā)環(huán)境下是沒有問題的，打包完以后出現(xiàn)小方塊，頁面不顯示， 解決辦法：找到utils.js文件，如下圖，

function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../',//解決ele小圖標(biāo)出不來問題})} else {return ['vue-style-loader'].concat(loaders)}}

第二：打包完以后路徑不對了，加載文件，圖片不出來

解決辦法：找到config里面的index.js，加入assetsPublicPath: ‘./’,

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './', //解決打包完路徑不對的問題

第三.調(diào)大

第四：阿里巴巴icon圖標(biāo)，加上HTTP

第五：data里寫的圖片路徑，所以需要把路徑換為 ‘./static/imgs/XXXX.png’

data () {return {//審核狀態(tài)state: '',roledata: [{name: '1', img: './static/imgs/XXX.png'},{name: '2', img: './static/imgs/XXX.png'},{name: '3', img: './static/imgs/XXX.png'},{name: '4', img: './static/imgs/XXX.png'},]}},

以后吧路徑統(tǒng)一寫成‘./static/imgs/XXXX.png’ 本地也能訪問到，打包后就不會沖突

總結(jié)

以上是生活随笔為你收集整理的VUE打包图片，icon图标不显示解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。