今天在專案中使用了public資料夾裡的靜態資源，在本地測試沒有發現問題，但是專案部署到fat伺服器卻報了404錯誤。

我發現原因在於我的專案沒有部署在域名的根部，而我引用public檔案是通過絕對路徑方式引用的，因為就出現了路徑錯誤。

路徑如下：

<img :src="`/image1.png`">

在官網文件中發現這種情況需要為 URL 配置 publicPath 字首：process.env.BASE_URL

正確的引用路徑是：

<img :src="`${process.env.BASE_URL}image1.png`">

當然，最好避免將檔案放在public資料夾，因為任何放置在 public 資料夾的靜態資源都會被簡單的複製，而不經過 webpack。

補充知識：@vue/cli 3 打包檔案讀取絕對路徑處理

@vue/cli 3 封裝了 webpack.config.js，一般都在 vue.config.js 裡面配置，官網不推薦在 webpack 的 output 處理，這裡踩了一下坑，希望可以幫到後面遇到的小夥伴。

vue.config.js

module.exports = {
 // 這裡是配置上線讀取當前目錄，預設是根路徑，如 /js,/css 等，具體根據專案來
 baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',// others
}

以上這篇vue-cli3訪問public資料夾靜態資源報錯的解決方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。