vue部署后靜態(tài)文件加載404的解決
vue部署后靜態(tài)文件加載404
vue部署問題:
1、js、css靜態(tài)文件加載報(bào)404
解決辦法：build-->index.vue中，assetsPublicPath:'/'這里前面加個(gè)“.”
2、element圖標(biāo)背景404
解決辦法：
vue動(dòng)態(tài)加載靜態(tài)資源
項(xiàng)目背景：項(xiàng)目的使用場(chǎ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路徑中使用變量，會(huì)被編譯為字符串，導(dǎo)致編譯后的路徑就是我們寫上去的字符串形式，比如你在data中定義了一個(gè)變量src，然后在img標(biāo)簽中引用
//data中定義變量src
data() {
? return {
? ? src: 'demo'?
? }
}
//模版中的標(biāo)簽
<img src="@/assets/icon/" + src + ".png">你會(huì)發(fā)現(xiàn)這個(gè)時(shí)候圖片并沒有被加載出來，瀏覽器中這張圖片的地址直接顯示’@/assets/icon/demo.png’，也就是沒有經(jīng)過編譯的步驟，直接將我們的輸入當(dāng)作字符串顯示
在實(shí)際開發(fā)中，難免會(huì)需要?jiǎng)討B(tài)生成圖片路徑的場(chǎng)景，那么如何正確顯示圖片呢？
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"/>圖片可以正確顯示，但需要圖片名稱和你引入的圖片手動(dòng)做好對(duì)應(yīng)。作為一個(gè)程序員，當(dāng)然不會(huì)使用這么low的操作了，所以就有了下文
2.使用require
require可以在代碼中使用，所以我們可以在獲取數(shù)據(jù)的同時(shí)，為數(shù)對(duì)象增加一個(gè)src的屬性
getData() {
? this.data.forEach(ele => {
? ? ele.src = require('@/assets/icon/' + ele.name + '.png');
? })
}這就需要我們規(guī)范本地圖片的命名了，確保能最有效地獲取到正確的圖片路徑
使用require的時(shí)候也需要注意一點(diǎn)：require內(nèi)容不能使用變量，如下寫法會(huì)直接導(dǎo)致編譯報(bào)錯(cuò)
let src = '@/assets/icon/demo.png'; require(src) //報(bào)錯(cuò)“. is not a module”
3.將本地資源放到static目錄下引用
getData() {
? this.data.forEach(ele => {
? ? ele.src = 'static/icon/' + ele.name + '.png'
? })
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue中靜態(tài)文件引用的注意事項(xiàng)及說明
- vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑
- Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
- Vue3.0靜態(tài)文件存放路徑與引用方式
- Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法
- vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件
- 如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
- Vue項(xiàng)目設(shè)置多個(gè)靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
相關(guān)文章
這篇文章主要介紹了vue頁面切換過渡transition效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問題及解決方案
這篇文章主要介紹了vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問題及解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue-cli4項(xiàng)目開啟eslint保存時(shí)自動(dòng)格式問題
這篇文章主要介紹了vue-cli4項(xiàng)目開啟eslint保存時(shí)自動(dòng)格式的問題小結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時(shí)候,我們經(jīng)常會(huì)需要把文本數(shù)據(jù)的行與列進(jìn)行轉(zhuǎn)換操作，這樣更方便查看，本文就詳細(xì)的介紹了vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題
這篇文章主要介紹了vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件
這篇文章主要為大家詳細(xì)介紹了Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04