vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式
今天在項目中使用了public文件夾里的靜態(tài)資源，在本地測試沒有發(fā)現(xiàn)問題，但是項目部署到fat服務(wù)器卻報了404錯誤。
我發(fā)現(xiàn)原因在于我的項目沒有部署在域名的根部，而我引用public文件是通過絕對路徑方式引用的，因為就出現(xiàn)了路徑錯誤。
路徑如下：
<img :src="`/image1.png`">
在官網(wǎng)文檔中發(fā)現(xiàn)這種情況需要為 URL 配置 publicPath 前綴：process.env.BASE_URL
正確的引用路徑是：
<img :src="`${process.env.BASE_URL}image1.png`">
當(dāng)然，最好避免將文件放在public文件夾，因為任何放置在 public 文件夾的靜態(tài)資源都會被簡單的復(fù)制，而不經(jīng)過 webpack。
補充知識：@vue/cli 3 打包文件讀取絕對路徑處理
@vue/cli 3 封裝了 webpack.config.js，一般都在 vue.config.js 里面配置，官網(wǎng)不推薦在 webpack 的 output 處理，這里踩了一下坑，希望可以幫到后面遇到的小伙伴。
vue.config.js
module.exports = {
// 這里是配置上線讀取當(dāng)前目錄，默認(rèn)是根路徑，如 /js, /css 等，具體根據(jù)項目來
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
// others
}
以上這篇vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強大的Web應(yīng)用程序。2023-02-02
最近小編接了一個新項目，項目需求要實現(xiàn)一個聊天功能，今天小編通過實例代碼給大家介紹vue cli使用融云實現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
在vue3版本中，引入了一個新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
這篇文章主要介紹了解決vant框架做H5時踩過的坑(下拉刷新、上拉加載等)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
這篇文章主要介紹了vue?mounted周期中document.querySelectorAll()獲取不到元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Props傳參v-for后TS報錯對象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10