今天在項目中使用了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
|
1
2
3
4
5
|
module.exports = { // 這里是配置上線讀取當前目錄，默認是根路徑，如 /js, /css 等，具體根據項目來 baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', // others} |
以上這篇vue-cli3訪問public文件夾靜態資源報錯的解決方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/u010007013/article/details/102674042
