vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件
作為圖片最好放在static目錄下，但是vue@cli3沒(méi)有static，網(wǎng)上都說(shuō)放在public目錄下，行，那就放吧，可問(wèn)題是圖片放了怎么使用
第一次嘗試
肯定用絕對(duì)路徑這就不說(shuō)了，用相對(duì)路徑，webpack會(huì)解析成base64，可是絕對(duì)路徑怎么輸都不對(duì)，咋回事
后面看網(wǎng)上說(shuō)把前面路徑下的public路徑去掉，好，開發(fā)環(huán)境沒(méi)問(wèn)題了，可打包報(bào)錯(cuò)怎么辦，就這個(gè)我研究了好久。
解決問(wèn)題
網(wǎng)上一大堆牛頭不對(duì)馬嘴的，我也是無(wú)語(yǔ)了
最后的最后，終于官網(wǎng)找到了完美的解決方案
如此設(shè)置，完美解決問(wèn)題，如果你留心觀察過(guò)，你會(huì)發(fā)現(xiàn)，index.html文件的ico圖標(biāo)就已經(jīng)這么使用了
<template>
<div class="er">
<el-scrollbar style="height:100%">
<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>
到此這篇關(guān)于vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件的文章就介紹到這了,更多相關(guān)vue@cli3 public靜態(tài)文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中的過(guò)濾器，本文通過(guò)文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無(wú)效的問(wèn)題
今天小編就為大家分享一篇快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能
這篇文章主要介紹了在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-12-12
Vue.directive 自定義指令的問(wèn)題小結(jié)
這篇文章主要介紹了Vue.directive 自定義指令的問(wèn)題小結(jié),需要的朋友可以參考下2018-03-03
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結(jié)，偵聽器一般來(lái)說(shuō)是用來(lái)監(jiān)聽數(shù)據(jù)的變化，默認(rèn)是在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行。監(jiān)聽的數(shù)據(jù)名放到這里面作為函數(shù)名，這個(gè)函數(shù)里面有兩個(gè)參數(shù)，一個(gè)是新值，一個(gè)是舊值。下面我們就一起進(jìn)入文章了解更具體的內(nèi)容吧2021-12-12
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue3封裝el-pagination分頁(yè)組件的完整代碼
這篇文章主要介紹了vue3封裝el-pagination分頁(yè)組件的完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
Nvue是一個(gè)基于weex改進(jìn)的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁(yè)面用法uniapp,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問(wèn)題,需要的朋友可以參考下2018-03-03