vue@cli3項目模板使用public目錄下靜態(tài)文件的方法

發(fā)布時間：2020-07-08 11:14:17 來源：億速云閱讀：627 作者：清晨欄目：開發(fā)技術(shù)

不懂vue@cli3項目模板使用public目錄下靜態(tài)文件的方法？其實想解決這個問題也不難，下面讓小編帶著大家一起學(xué)習(xí)怎么去解決，希望大家閱讀完這篇文章后大所收獲。

作為圖片最好放在static目錄下，但是vue@cli3沒有static，網(wǎng)上都說放在public目錄下，行，那就放吧，可問題是圖片放了怎么使用

第一次嘗試

肯定用絕對路徑這就不說了，用相對路徑，webpack會解析成base64，可是絕對路徑怎么輸都不對，咋回事

vue@cli3項目模板使用public目錄下靜態(tài)文件的方法

后面看網(wǎng)上說把前面路徑下的public路徑去掉，好，開發(fā)環(huán)境沒問題了，可打包報錯怎么辦，就這個我研究了好久。

解決問題

網(wǎng)上一大堆牛頭不對馬嘴的，我也是無語了
最后的最后，終于官網(wǎng)找到了完美的解決方案

vue@cli3項目模板使用public目錄下靜態(tài)文件的方法

如此設(shè)置，完美解決問題，如果你留心觀察過，你會發(fā)現(xiàn)，index.html文件的ico圖標(biāo)就已經(jīng)這么使用了

 <template>
 <div class="er">
 <el-scrollbar >
  <div class="ds">
  <img
   class="sdde"
   :src='`${publicPath}imges/but_play.png`'
  >
  </div>
 </el-scrollbar>
 </div>
</template>

<script>
export default {
 data() {
 return {
  publicPath: process.env.BASE_URL
 }
 },
 components: {
 }

}
</script>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue@cli3項目模板使用public目錄下靜態(tài)文件的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

vue@cli3項目模板使用public目錄下靜態(tài)文件的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽