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