vue@cli3項目模板怎么使用public目錄下的靜態(tài)文件
更新時間：2020年07月07日 11:34:49 作者：愛吃巧克力的狗
這篇文章主要介紹了vue@cli3項目模板怎么使用public目錄下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
作為圖片最好放在static目錄下，但是vue@cli3沒有static，網上都說放在public目錄下，行，那就放吧，可問題是圖片放了怎么使用
第一次嘗試
肯定用絕對路徑這就不說了，用相對路徑，webpack會解析成base64，可是絕對路徑怎么輸都不對，咋回事
后面看網上說把前面路徑下的public路徑去掉，好，開發(fā)環(huán)境沒問題了，可打包報錯怎么辦，就這個我研究了好久。
解決問題
網上一大堆牛頭不對馬嘴的，我也是無語了
最后的最后，終于官網找到了完美的解決方案
如此設置，完美解決問題，如果你留心觀察過，你會發(fā)現(xiàn)，index.html文件的ico圖標就已經這么使用了
<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>
到此這篇關于vue@cli3項目模板怎么使用public目錄下的靜態(tài)文件的文章就介紹到這了,更多相關vue@cli3 public靜態(tài)文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解elementUI中input框無法輸入的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue 檢測用戶上傳圖片寬高的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了vue實現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
在本篇文章里小編給大家整理的是關于Vue數據綁定實例寫法以及相關知識點，需要的朋友們學習下。2019-08-08
Vue3關于響應式數據類型詳解(ref、reactive、toRef、及toRefs)
這篇文章主要介紹了Vue3關于響應式數據類型(ref、reactive、toRef、以及toRefs),本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題
這篇文章主要介紹了vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇解決vue多個路由共用一個頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue開發(fā)Html5微信公眾號的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue+webpack 更換主題N種方案優(yōu)劣分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10