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