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