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)文章
這篇文章主要介紹了Vue 實(shí)現(xiàn)雙向綁定的四種方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧，希望能夠給你帶來(lái)幫助2021-11-11
vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能，文中給大家補(bǔ)充介紹了vue實(shí)現(xiàn)密碼顯示隱藏切換功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友一起看看吧2018-05-05
element-ui 關(guān)于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關(guān)于獲取select 的label值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue3中事件總線mitt代碼實(shí)例(第三方庫(kù)mitt)
這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫(kù)mitt)的相關(guān)資料,Mitt是一個(gè)在Vue.js應(yīng)用程序中使用的小型事件總線庫(kù),該庫(kù)允許組件進(jìn)行通信,而不必過(guò)度依賴父級(jí)或子級(jí)組件之間的props,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個(gè) mixin 方法，這個(gè)方法會(huì)在每個(gè)組件創(chuàng)建之前被調(diào)用，我們可以在這個(gè)方法中將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問(wèn)題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問(wèn)題及解決辦法,本文給大家分享問(wèn)題所在原因及解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vite打包去除console.log和debugge的方法實(shí)踐
本文主要介紹了vite打包去除console.log和debugge的方法實(shí)踐,vite 已經(jīng)將這個(gè)功能內(nèi)置了,所以我們只需要修改配置文件,下面就來(lái)介紹一下如何修改2023-12-12
解決Vue編譯時(shí)寫(xiě)在style中的路徑問(wèn)題
下面小編就為大家?guī)?lái)一篇解決Vue編譯時(shí)寫(xiě)在style中的路徑問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue組件大全包括（UI組件,開(kāi)發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例)
本文為大家分享了網(wǎng)上比較流行的Vue組件,包括UI組件,開(kāi)發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例等開(kāi)源項(xiàng)目,總有一款適合你2018-10-10
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡(jiǎn)單寫(xiě)一下如何通過(guò)minio來(lái)上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過(guò)minio上傳文件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07