vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式
更新時間：2019年11月12日 16:59:47 作者：向夢想出發(fā)11
今天小編就為大家分享一篇vue 項(xiàng)目打包時樣式及背景圖片路徑找不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：vue項(xiàng)目打包后，文件找得到，但是引用的字體及背景圖片找不到；
解決方法：
主要是需要單獨(dú)為 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一個 options.publicPath 的 api，可以為css單獨(dú)配置 publicPath 。
對于用 vue-cli 生成的項(xiàng)目，dist 目錄結(jié)構(gòu)如下：
dist
├── index.html
└── static
├── css
├── img
└── js
經(jīng)常遇見的問題是 css 中 background-image 的相對路徑不能正確的引用到 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)目打包時樣式及背景圖片路徑找不到的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
這篇文章主要介紹了如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue.js項(xiàng)目中管理每個頁面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項(xiàng)目中管理每個頁面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue中(el-button的五種類型，三種css格式)具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue項(xiàng)目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項(xiàng)目三級聯(lián)動的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了Vue中使用vux配置的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11