一、前言
前端小白，只是費了好大力氣找到了解決問題的辦法，但並不了解背后的原因，考慮到各方面的因素，將開發環境配置發在下邊，同時也歡迎前端大佬們對文章中的情況答疑解惑，小白感激不盡！
開發環境：
npm 6.14.8
node 14.15.0
vue-cli 4.5.9
vue-admin-template 4.4.0
我只修改了vue-admin-template的路由配置，並且添加了些頁面以及請求api等，其他系統性配置的東西均未修改。
文件目錄及結構如下：
addSubject.vue中下載本地文件demo.xlsx,以及引入圖片01.jpg
二、文件本地下載
錯誤做法：
<a href="/public/demo.xlsx" download>下載模板</a>
正確做法：
<a href="demo.xlsx" download>下載模板</a> <a href="./demo.xlsx" download>下載模板</a> <a href="/demo.xlsx" download>下載模板</a>
奇怪的是在vue-cli2中如果把public換成static（vue-cli3之后目錄結構有所改變，public等同於static文件夾），第一種做法是正確的，但是在vue-cli4中就會出現如下圖的錯誤
猜測：vue-cli4中引用public文件時，“/”是以public文件夾內部為根目錄開始找的。
三、public文件夾資源引用問題
錯誤做法：
<!-- 編譯不通過，直接報錯 --> <img src="./01.jpg"/> <!-- 編譯通過，但無法正常顯示圖片 --> <img src="/public/01.jpg"/>
正確做法：
<img src="01.jpg"/> <img src="/01.jpg"/>
疑惑：01.jpg就可以為什么./01.jpg就不可以呢？