vue部署后靜態(tài)文件加載404的解決
vue部署后靜態(tài)文件加載404
vue部署問題:
1、js、css靜態(tài)文件加載報404
解決辦法:build-->index.vue中,assetsPublicPath:'/'這里前面加個“.”
2、element圖標背景404
解決辦法:
vue動態(tài)加載靜態(tài)資源
項目背景:項目的使用場景是面向信息安全相關(guān)部門,環(huán)境很有可能沒有公網(wǎng),局域網(wǎng)并不穩(wěn)定,所以無法使用七牛等CDN保存圖片資源。從而采用引入本地資源的方式
通常一張本地靜態(tài)圖片在vue中的寫法是這樣
<img src="@/assets/icon/demo.png">
但是,img標簽如果在src路徑中使用變量,會被編譯為字符串,導致編譯后的路徑就是我們寫上去的字符串形式,比如你在data中定義了一個變量src,然后在img標簽中引用
//data中定義變量src data() { ? return { ? ? src: 'demo'? ? } } //模版中的標簽 <img src="@/assets/icon/" + src + ".png">
你會發(fā)現(xiàn)這個時候圖片并沒有被加載出來,瀏覽器中這張圖片的地址直接顯示’@/assets/icon/demo.png’,也就是沒有經(jīng)過編譯的步驟,直接將我們的輸入當作字符串顯示
在實際開發(fā)中,難免會需要動態(tài)生成圖片路徑的場景,那么如何正確顯示圖片呢?
1.在當前頁面全局import圖片地址
//使用import引入 import pic1 from '@/assets/icon/demo1.png' import pic2 from '@/assets/icon/demo2.png' //在data中定義圖片變量 data() { ? return { ? ? pic: {[ ? ? ? name: 'demo1', ? ? ? src: pic1, ? ? ], [ ? ? ? name: 'demo2', ? ? ? src: pic2, ? ? ]} ? } } //在HTML中使用 <img v-for="item in pic" :src="item.src" :alt="item.name"/>
圖片可以正確顯示,但需要圖片名稱和你引入的圖片手動做好對應。作為一個程序員,當然不會使用這么low的操作了,所以就有了下文
2.使用require
require可以在代碼中使用,所以我們可以在獲取數(shù)據(jù)的同時,為數(shù)對象增加一個src的屬性
getData() { ? this.data.forEach(ele => { ? ? ele.src = require('@/assets/icon/' + ele.name + '.png'); ? }) }
這就需要我們規(guī)范本地圖片的命名了,確保能最有效地獲取到正確的圖片路徑
使用require的時候也需要注意一點:require內(nèi)容不能使用變量,如下寫法會直接導致編譯報錯
let src = '@/assets/icon/demo.png'; require(src) //報錯“. is not a module”
3.將本地資源放到static目錄下引用
getData() { ? this.data.forEach(ele => { ? ? ele.src = 'static/icon/' + ele.name + '.png' ? }) }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 實現(xiàn)一個簡單的全局調(diào)用彈窗案例
這篇文章主要介紹了vue 實現(xiàn)一個簡單的全局調(diào)用彈窗案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue前端項目打包成Docker鏡像并運行的實現(xiàn)
這篇文章主要介紹了vue前端項目打包成Docker鏡像并運行的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03