vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式
問(wèn)題描述：vue項(xiàng)目打包后，文件找得到，但是引用的字體及背景圖片找不到；
解決方法：
主要是需要單獨(dú)為 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一個(gè) options.publicPath 的 api，可以為css單獨(dú)配置 publicPath 。
對(duì)于用 vue-cli 生成的項(xiàng)目，dist 目錄結(jié)構(gòu)如下：
dist
├── index.html
└── static
├── css
├── img
└── js
經(jīng)常遇見(jiàn)的問(wèn)題是 css 中 background-image 的相對(duì)路徑不能正確的引用到 img 文件夾中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
以上這篇vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了關(guān)于表單組件el-form中的prop的作用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue基本使用之對(duì)象提供的屬性功能實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
antd form表單使用setFildesValue 賦值失效的解決
這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
vue + node如何通過(guò)一個(gè)Txt文件批量生成MP3并壓縮成Zip
這篇文章主要介紹了vue + node如何通過(guò)一個(gè)Txt文件批量生成MP3并壓縮成Zip的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇解決vue組件中click事件失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟記錄
vue.cli是vue中的項(xiàng)目構(gòu)造工具,是一個(gè)npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2022-06-06
基于axios 的responseType類(lèi)型的設(shè)置方法
今天小編就為大家分享一篇基于axios 的responseType類(lèi)型的設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10