詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問(wèn)題
更新時(shí)間：2020年07月13日 11:19:17 作者：iVRJay
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
錯(cuò)誤描述：
Vue+elementUI build打包部署后字體圖標(biāo)丟失，控制臺(tái)顯示文件element-icons.woff和element-icons.ttf文件404
錯(cuò)誤展現(xiàn)：
控制臺(tái)報(bào)錯(cuò)截圖
dom渲染展示
解決方法：
webpack module配置：(build目錄下webpack.base.conf.js)
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
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)
}
處理結(jié)果：
到此這篇關(guān)于詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問(wèn)題的文章就介紹到這了,更多相關(guān)element build打包部署字體圖標(biāo)丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中字典的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 打包后的文件部署到express服務(wù)器上的方法
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開發(fā)，下面通過(guò)本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
Vue中addEventListener()?監(jiān)聽(tīng)事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽(tīng)事件案例講解，包括語(yǔ)法講解和事件冒泡或事件捕獲的相關(guān)知識(shí)，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法
最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說(shuō)明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過(guò)程,也就是new Vue()開始就是vue生命周期的開始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期2022-10-10