webpack打包靜態(tài)資源路徑不準(zhǔn)確

問題

1.將打包好的項(xiàng)目部署到服務(wù)器，發(fā)現(xiàn)報(bào)錯(cuò)說圖片找不到。

2.靜態(tài)資源如js訪問不到

分析并且解決問題

明確一點(diǎn)的就是，看到報(bào)錯(cuò)404，找不到靜態(tài)資源，很明顯，路徑錯(cuò)誤了。

靜態(tài)資源找不到如js文件

資源打包路徑有誤，打包后的資源使用了絕對(duì)根目錄路徑，因此將項(xiàng)目部署到特定目錄下，其引入的資源路徑無法被正確解析。

解決：

找到config下面的index.js文件，將劃線處改為如下樣子。

之前是根目錄，肯定找不到文件，我們改成相對(duì)目錄即可。打包后，去看看index.html中引入的文件就知道變化了。

圖片找不到

首先我們來看一下我們打包后生成的文件目錄：

上面的報(bào)錯(cuò)，要是沒有static/css就完全可以找到圖片了。但是為什么有的圖片能夠找得到有的圖片找不到呢，同樣的方法寫在css文件里面。這里我們就要了解一下webpack在打包我們的文件時(shí)候進(jìn)行的操作了。

webpack打包limit限制

limit值為10000，表示字節(jié)。什么作用呢？就是小于這個(gè)字節(jié)限制的，不是不打包，而是轉(zhuǎn)化為base64（css樣式中，圖片的代碼變成了一堆字符）。大于的話就正常打包，加上7位hash值，就變成如下路徑。

跑到了img下面去了，img這個(gè)名字就是我們上面webpack配置的。這樣路徑就不對(duì)了，所以找不到圖片。

從源頭分析問題

在vue項(xiàng)目中，我們打包生成項(xiàng)目，跑命令如下。

npm run build

那么，我們就看看在執(zhí)行這個(gè)命令中，運(yùn)行的代碼，以此入手。找到config下面的index.js文件

打包后生成的文件代碼：

最開始，我們的assetsPublicPath值為'/'，表示根目錄，我們看看打包后的文件樣子。

這樣直接從根目錄獲取，我們將項(xiàng)目部署到服務(wù)器上都是有名字的，這樣直接到服務(wù)器根目錄肯定不能獲取。

解決圖片路徑錯(cuò)誤辦法

在build文件夾下面找到utils.js文件，如下圖

新增紅色的部分，這樣打包的樣子就變成../../static的樣子了，就可以解決我們的問題。

webpack中的靜態(tài)資源處理

你可能已經(jīng)注意到，在我們的項(xiàng)目結(jié)構(gòu)里，有兩個(gè)靜態(tài)文件的路徑，分別是：src/assets 和 static/。那這兩個(gè)到底有什么區(qū)別呢？

Webpacked 資源

為了回答這個(gè)問題，我們首先需要理解webpack是怎樣處理靜態(tài)資源的。在*.vue組件中，所有的templates和css都會(huì)被vue-html-loader 和 css-loader解析，尋找資源的URL。舉個(gè)例子，在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中，都是相對(duì)資源路徑，都會(huì)被Webpack解析成模塊依賴 。

由于logo.png不是JavaScript，當(dāng)被看成一個(gè)模塊依賴的時(shí)候，我們需要使用url-loader 和 file-loader進(jìn)行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對(duì)/模塊路徑時(shí)不需要擔(dān)心部署的問題。 （This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.）

由于這些資源可能在構(gòu)建的時(shí)候被內(nèi)聯(lián)/復(fù)制/重命名， 所以它們從本質(zhì)上來說是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。實(shí)際上，你甚至不需要把它們?nèi)挤旁?src/assets路徑下：你可以基于模塊/組件的使用來組織文件結(jié)構(gòu)。例如，你可以把每個(gè)組件和屬于它的靜態(tài)資源放在它自己的目錄下。

資源處理規(guī)則

• 相對(duì)URL, e.g. ./assets/logo.png 將會(huì)被解釋成一個(gè)模塊依賴。它們會(huì)被一個(gè)基于你的Webpack輸出配置自動(dòng)生成的URL替代。
• 沒有前綴的URL, e.g. assets/logo.png 將會(huì)被看成相對(duì)URL，并且轉(zhuǎn)換成./assets/logo.png
• 前綴帶~的URL 會(huì)被當(dāng)成模塊請(qǐng)求, 類似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個(gè)前綴。例如，如果你有一個(gè)對(duì)于assets的路徑解析，你需要使用<img src="~assets/logo.png">來確保解析是對(duì)應(yīng)上的。
• 相對(duì)根目錄的URL, e.g. /assets/logo.png 是不會(huì)被處理的.

在JavaScript里獲取資源路徑

為了能讓W(xué)ebpack返回正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，由file-loader進(jìn)行解析，然后返回處理過的URL。例如：

computed: {
? background () {
? ? return require('./bgs/' + this.id + '.jpg')
? }
}

"真實(shí)的" 靜態(tài)資源

作為對(duì)比，在static/下的文件都不會(huì)被Webpack處理：它們使用相同的文件名，直接拷貝到最終的路徑。你必須使用絕對(duì)路徑來引用這些文件，取決于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory。

舉個(gè)例子，下面的默認(rèn)值是：

注意上面的例子，在最終的構(gòu)建時(shí)將會(huì)包含./bgs/路徑下的所有圖片 這是因?yàn)閃ebpack不能猜出來在運(yùn)行時(shí)會(huì)用到其中的哪個(gè)，所以會(huì)包含所有的。

// config/index.js
module.exports = {
? // ...
? build: {
? ? assetsPublicPath: '/',
? ? assetsSubDirectory: 'static'
? }
}

所有放在 static/目錄下的文件都應(yīng)該是使用絕對(duì)URL/static/[filename]引用的。如果你將assetSubDirectory的值改成assets， 那么這些URL就會(huì)被變成 /assets/[filename]

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論