Vue打包后訪問靜態資源路徑問題

Vue介紹中static文件夾里放的是靜態資源目錄，如圖片、字體等。

我們發現運行npm run start后本地圖片路徑是沒問題的，但是打包上傳后會怎么樣呢？

我們知道，執行npm run build 后會生成dist文件夾，把里面的index.html在瀏覽器運行會發現

圖片路徑出錯啦！！！

解決方法：

1.先找到config下的index.js文件

把最后的'/' 改為 './'

2.接著把圖片地址改為

以上就是Vue打包后訪問靜態資源路徑問題的相關知識點，感謝大家的閱讀和對我們的支持。

時間： 2019-11-06

好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續續有剛入vue小伙伴問vue動態加載圖片總是404的狀況,這篇就簡單的說明為什么會出現以及解決辦法有哪些. 首先先說明下vue-cli的assets和static的兩個文件的區別,因為這對你理解后面的解決辦法會有所幫助 assets:在項目編譯的過程中會被webpack處理解析為模塊依賴,只支持相對路徑的形式,如< img src="./logo.png">和background:url(./logo.p

首先先說明下vue-cli的assets和static的兩個文件的區別,因為這對你理解后面的解決辦法會有所幫助 assets:在項目編譯的過程中會被webpack處理解析為模塊依賴,只支持相對路徑的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相對資源路徑,將有webpack解析為模塊依賴 static:在這個目錄下文件不會被webpack處理,簡單就是說存放第三方

我的代碼結構如下所示不能執行,會出現報錯 export default { data(){ return{ radio_arr:['循環1','循環2','循環3'], animal:'循環2' } } } 報錯信息: 修改代碼如下: 修改內容為 la

前言 Vue.js 是開源的一個前端開發庫,通過簡潔的 API 提供高效的數據綁定和靈活的組件系統.在前端紛繁復雜的生態中,Vue.js在近年來受到一定程度的關注,目前在 GitHub上已經有5000+. 本文是筆者在開發實踐中踩過的坑,總結和分享出來,希望對大家學習Vue有所幫助.下面來看看詳細的介紹: [問題描述] v-for遍歷數組中存在空值導致頁面報錯,情況如下: 開發框架是以Vue為模型綁定的核心,根據錯誤可以進行一個簡單的判斷: ? removeChild操作既然不是發生在開發者顯示

vue-cli寫完的靜態頁面我們在node環境中引入沒有問題,但是打包后放在Apache環境下,路徑卻有問題了 如一個簡單css語句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路徑成了卻出現404訪問不到的問題. 解決的辦法很簡單 build路徑下utils.js文件 // Extract CSS when that option is speci

這里以vue-cli創建的項目為例 1.文件路徑不對 找到config文件夾下的index.js文件修改一下位置 看清楚是 build(上邊還有個dev 是開發環境下的配置,不需要改動)下的 assetsPublicPath :將'/'改為'./' 2.背景圖片路徑不對 在css中寫的background-img的路徑出錯 需要找到build文件夾下的utils.js,修改一下位置 加入紅框內字段即可. 以上這篇解決Vue打包之后文件路徑出錯的問題就是小編分享給大家的全部內容了,希望能給大家一個

共享一段使用PHP下載CSS文件中的圖片的代碼 復制代碼 代碼如下: <?php //note 設置PHP超時時間 set_time_limit(0); //note 取得樣式文件內容 $styleFileContent = file_get_contents('images/style.css'); //note 匹配出需要下載的URL地址 preg_match_all("/url\((.*)\)/", $styleFileContent, $imagesURLArray);

作為一個資深并且專業的扒皮人員,在我從初三開始投入偉大的互聯網中到現在積累了豐富的扒皮經驗.我相信每個做web的程序員也都會有類似的經歷. 在扒皮過程中,必不可少的需要下載樣式文件中的圖片.碰到比較龐大的樣式文件,其中可能會有上百個需要下載的圖片,那么使用下面這段小代碼是最為合適的了. < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Documentation:

作為一個資深并且專業的扒皮人員,在我從初三開始投入偉大的互聯網中到現在積累了豐富的扒皮經驗.我相信每個做web的程序員也都會有類似的經歷. 在扒皮過程中,必不可少的需要下載樣式文件中的圖片.碰到比較龐大的樣式文件,其中可能會有上百個需要下載的圖片,那么使用下面這段小代碼是最為合適的了. 復制代碼 代碼如下: < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Doc

問題描述:vue項目打包后,文件找得到,但是引用的字體及背景圖片找不到: 解決方法: 主要是需要單獨為 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一個 options.publicPath 的 api,可以為css單獨配置 publicPath . 對于用 vue-cli 生成的項目,dist 目錄結構如下: dist ├── index.html └── static ??? ├── css ??? ├── img ??? └── js 經

1.問題描述 在項目開發中,當我們通過npm run build打包之后將文件放在服務器上時通常會出現圖片失效問題,控制臺中提示某個圖片沒有找到(404錯誤),這些圖片可以是以src引入的圖片, 也可以是css中定義的背景圖片.圖片能否顯示與你的靜態資源文件存在位置和引入的路徑直接相關,下面是我的其中一個項目的文件存放以及路徑書寫方式! 2.解決方法之一 靜態資源static存放位置放在src目錄下 你可能會問為什么放在src目錄下?放在跟src同級目錄下不可以嗎?好吧,一開始我也是放在src同

大家可否遇到過 npm run build 打包后,項目在線上運行時,資源文件 (圖片.圖標)不顯示 的問題, 接下來,我給大家分享一下我的解決方案~ 1.檢查打包后dist中的css文件 打開此文件后你會頭暈,因為都是打包壓縮過的css代碼,不過沒關系 ,關鍵字搜索url 檢查該url路徑是否匹配正確 對比后驚人發現!!! 因此在url路徑前添加../../就OK了, 但是 很麻煩,每次打包后都要進行二次加工嗎? 并不是!!! 2.自動添加 ../../ 的方法 打開build/utils.j

先看一下產品需求,如下圖所示, 產品要求圖片和它的名稱一一對應,本來是非常簡單的需求,后臺直接返回圖片路徑和名稱,前臺直接讀取就可以了,但是我們沒有存儲圖片的服務器,再加上是一個實驗性的需求,圖片需要存放到前臺.當時我想,vue 中的img 的src 可以動態綁定到一個變量上, 很簡單嗎,就沒有考慮太多,直接開始做了. 首先和后臺商量一下數據結構,因為圖片要和名稱一一對應,所以后臺要返回中英文的名稱的映射,我把前臺的圖片名稱直接設置給后臺給的英文名稱,從而讀取圖片,圖片和中文名稱就一一對應了.數

第一步.cdn引入各種包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下圖: 第二步.在使用vue等包的地方,注釋掉import引入 在所有使用vue的地方注釋掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上這句話,還是會打包element-ui到vendor.js文件中 在main.js

總結

以上是生活随笔為你收集整理的vue打包后css路径_Vue打包后访问静态资源路径问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。