詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源
處理靜態(tài)資源
你也許會注意到vue-cli與webpack結(jié)合的項目中，我們通常會有兩個靜態(tài)資源的路徑：src/assets和static/，他們兩者的區(qū)別是什么呢？
打包的資源
為了回答這個問題，我們首先要明白Webpack是如何處理靜態(tài)資源的。在*.vue組件里，所有的templates和CSS模塊都被vue-html-loader和css-loader解析來查找路徑URL。
舉個例子，在<img src"./logo.png">和背景background: url(./logo.png)，”./logo.png”是一個相對路徑，會被Webpack當(dāng)做一個依賴加載。
但是因?yàn)閘ogo.png并不是JavaScript，所以如果被當(dāng)成一個依賴的花，我們需要通過url-loader和file-loader來解析它。這個模板已經(jīng)為你配置了相應(yīng)的loader，所以你通常不用擔(dān)心相對路徑的部署問題。
即使這些資源有可能在構(gòu)建過程中被內(nèi)聯(lián)/拷貝/重命名，他們也是源碼重要組成部分。這就是為什么我們建議單獨(dú)在/src文件夾里放置靜態(tài)資源，如同其他的資源文件夾。
事實(shí)上，你都不必把他們?nèi)旁?src/assets，你可以根據(jù)模塊/組件來組織利用他們。比如說，你可以把任一組件放到他們自己的目錄，并在該目錄下存放靜態(tài)資源。
資源引入規(guī)則
相對路徑，比如 ./assets/logo.png會被解析成模塊依賴。它們會被一個基于你Webpack輸出配置的自動生成URL替代。
沒有前綴的路徑，比如assets/logo.png，同相對路徑，轉(zhuǎn)義成./assets/logo.png
有~前綴的路徑。 ~被認(rèn)為是一個模塊請求，同require('some-module/image.png')。根路徑，比如/assets/log.png
在JavaScript得到資源路徑
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
這個資源路徑同樣會被file-loader處理然后返回處理后的路徑。而且Webpack會一次性加載該bgs目錄下的所有圖片。
“真實(shí)的”靜態(tài)資源
與此相對的，static/中的文件全都不會被Webpack處理。它們將被直接拷貝到目標(biāo)文件夾，引用這些文件需要使用絕對路徑。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件
- vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
- vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
- 淺談webpack4 圖片處理匯總
- webpack 靜態(tài)資源集中輸出的方法示例
- 淺談 Webpack 如何處理圖片(開發(fā)、打包、優(yōu)化)
- 在Webpack中用url-loader處理圖片和字體的問題
- webpack實(shí)現(xiàn)靜態(tài)資源緩存的方法
- vue項目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題
- webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件
相關(guān)文章
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項目。由于最近需要實(shí)現(xiàn)國際化功能，所以下面這篇文章主要介紹了vue項目國際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
vue最強(qiáng)table vxe-table 虛擬滾動列表 前端導(dǎo)出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動列表 前端導(dǎo)出問題,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue3之事件綁定的實(shí)現(xiàn)邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
分分鐘學(xué)會vue中vuex的應(yīng)用（入門教程）
本篇文章主要介紹了vue中vuex的應(yīng)用（入門教程），詳細(xì)的介紹了vuex.js和應(yīng)用方法，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了vue路由打開一個新的窗口的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
前后端分離進(jìn)行項目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條
這篇文章主要介紹了Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
本文主要介紹，通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進(jìn)行掃碼識別功能，對識別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理，對vue瀏覽器掃碼功能的實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2021-10-10