vue-cli3訪問public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式
今天在項(xiàng)目中使用了public文件夾里的靜態(tài)資源，在本地測試沒有發(fā)現(xiàn)問題，但是項(xiàng)目部署到fat服務(wù)器卻報(bào)了404錯(cuò)誤。
我發(fā)現(xiàn)原因在于我的項(xiàng)目沒有部署在域名的根部，而我引用public文件是通過絕對路徑方式引用的，因?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ì)被簡單的復(fù)制，而不經(jīng)過 webpack。
補(bǔ)充知識：@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ù)項(xiàng)目來
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
// others
}
以上這篇vue-cli3訪問public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 實(shí)現(xiàn)雙向綁定的四種方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧，希望能夠給你帶來幫助2021-11-11
vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能
本文通過實(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à)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3中事件總線mitt代碼實(shí)例(第三方庫mitt)
這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫mitt)的相關(guān)資料,Mitt是一個(gè)在Vue.js應(yīng)用程序中使用的小型事件總線庫,該庫允許組件進(jìn)行通信,而不必過度依賴父級或子級組件之間的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)失靈的問題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問題及解決辦法,本文給大家分享問題所在原因及解決方案,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vite打包去除console.log和debugge的方法實(shí)踐
本文主要介紹了vite打包去除console.log和debugge的方法實(shí)踐,vite 已經(jīng)將這個(gè)功能內(nèi)置了,所以我們只需要修改配置文件,下面就來介紹一下如何修改2023-12-12
下面小編就為大家?guī)硪黄鉀QVue編譯時(shí)寫在style中的路徑問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue組件大全包括（UI組件,開發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例)
本文為大家分享了網(wǎng)上比較流行的Vue組件,包括UI組件,開發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例等開源項(xiàng)目,總有一款適合你2018-10-10
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07