使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法
更新時間：2023年08月25日 09:18:16 作者：???ddz???
這篇文章主要介紹了使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復(fù)雜通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
解決Vue項目使用yarn build打包時靜態(tài)文件或圖片未打包成功的問題
1. 檢查vue.config.js文件
首先，我們需要檢查項目根目錄下的 vue.config.js 文件，該文件用于配置Vue項目的打包和構(gòu)建選項。在這個文件中，我們需要確認(rèn)是否正確地配置了打包輸出目錄和文件規(guī)則。可以檢查以下幾個設(shè)置項：
module.exports = {
// ...
outputDir: 'dist', // 檢查輸出目錄是否正確，可以嘗試修改目錄名
assetsDir: 'static', // 檢查靜態(tài)資源的輸出目錄是否正確
// ...
}2. 檢查文件路徑引用
在Vue組件中引用靜態(tài)文件或圖片時，我們通常會使用相對路徑來引用。請確保你的文件路徑引用是正確的，并且能夠找到文件。建議在引用時使用相對于組件文件的路徑，而不是使用絕對路徑。例如：
<template>
<div>
<img src="./assets/img/logo.png" alt="Logo">
</div>
</template>3. 檢查文件大小限制
Webpack有一個默認(rèn)的文件大小限制設(shè)置，即不會將大于某個大小的文件打包到輸出目錄中。這個限制可以通過配置文件進行修改。在 vue.config.js 文件中，可以檢查以下設(shè)置項：
module.exports = {
// ...
configureWebpack: {
performance: {
maxAssetSize: 1000000, // 檢查設(shè)置是否正確，例如將文件大小限制設(shè)為1MB
},
},
// ...
}4. 檢查插件設(shè)置
如果你在項目中使用了某些Webpack插件來處理靜態(tài)文件或圖片，這些插件可能會導(dǎo)致打包失敗。請確保你所使用的插件是最新的，并且與你當(dāng)前的Vue和Webpack版本兼容。
5. 多人開發(fā)則需要注意打包方式
如果你在項目中使用的是yarn打包，其他人使用的是npm打包，也是會出現(xiàn)圖片未打包成功的問題。解決方法就是：
npm：刪掉yarn.lock文件。yarn：刪掉package-lock.ison文件。
到此這篇關(guān)于使用yarn build 打包vue項目時靜態(tài)文件或圖片未打包成功的文章就介紹到這了,更多相關(guān)yarn build 打包vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對路徑問題解決的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue中scoped樣式的作用是通過在DOM結(jié)構(gòu)和CSS樣式上添加唯一標(biāo)記來實現(xiàn)樣式私有化和模塊化,這一功能是通過PostCSS轉(zhuǎn)譯實現(xiàn)的,總結(jié)了三條渲染規(guī)則：1. 為HTML DOM節(jié)點添加不重復(fù)的data屬性；2. 在每個CSS選擇器末尾添加當(dāng)前組件的data屬性選擇器2025-01-01
剛剛創(chuàng)建好vue項目的時候,運行 npm run dev 會報錯,下面這篇文章主要給大家介紹了關(guān)于運行npm?run?dev報錯的原因及解決方法,需要的朋友可以參考下2022-10-10
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時間是一項常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時間,需要的朋友可以參考下2024-01-01
本文詳細(xì)介紹了Vue 3中的watchEffect函數(shù),包括其核心定義、工作原理、核心特性、實戰(zhàn)用法、與watch的區(qū)別、常見避坑點以及核心總結(jié),watchEffect簡化了響應(yīng)式偵聽,自動追蹤依賴并立即執(zhí)行,適用于動態(tài)依賴和簡單副作用場景,感興趣的朋友跟隨小編一起看看吧2025-12-12
Vue的組件化給前端開發(fā)帶來極大的便利,下面這篇文章主要給大家介紹了關(guān)于Vue子父組件之間傳值的三種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue3為我們開發(fā)提供了兩種組件邏輯實現(xiàn)方式：選項式API和組合式API,本文將嘗試為大家分析什么是選項式API和組合式API,以及兩種API的優(yōu)缺點,希望對大家有所幫助2023-12-12
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12