在項目打包時發現
static文件在打包時原封不動的打包到dist下的images文件下了。
但是奇怪的是還有一個名叫img的文件夾。
經過對比發現img里的文件都是images里的圖片文件。
而且數量遠遠比images里的文件少，還帶了一串哈希值。
然后發現哈希值前面的名稱在images里對應圖片名稱。
那么為什么是多出來這些文件呢?這些文件明顯重復需要優化，那能不能去掉？
從文件命名方式應該是url-loader打包生成的文件。
然后就開始我的踩坑之行
一、既然是url-loader打包生成的文件，為啥會出現？
因為webpack打包的原因，在頁面使用import引入圖片或者css里引入圖片時。webpack會對文件分析模塊打包，使用url-loader分析打包生成了一個圖片。
至於生成圖片的位置不寫就是圖片默認的位置和名稱。
二、那能不能避免掉？
1、可以選擇在頁面<template>里用絕對地址引入。
2、或者把url-loader的limit屬性設置大一點，生成base64。(這個在性能優化上肯定不靠譜，不能用）
三、既然是url-loader打包的，那能不能修改配置。把打包路徑寫在相同文件夾下，用同一個名字覆蓋掉？
開始
vue-cli項目默認是沒有生成vue.config.js文件的。需要手動創建。在官網查詢了
給地址吧，請記住這個網址。
在官網查詢了之后，配置了下面的代碼。
configureWebpack: { module:{ rules:[ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, include:/src/, // 在源文件目錄查詢 use: [{ // 圖片文件小於8k時編譯成dataUrl直接嵌入頁面，超過8k回退使用file-loader loader: 'url-loader', options: { limit: 1024*8, // 8k name:'[path]/[name].[ext]', // 利用[path]路徑獲取文件夾名稱並設置文件名 fallback: 'file-loader', // 當超過8192byte時，會回退使用file-loader context: path.resolve(__dirname,'./src'),//過濾掉[path]的相對路徑 publicPath: './' //采用根路徑 } }] } ] } },
打包發現沒有再生成img文件了，只有一個images文件。而且是按照src下的目錄結構生成的。完美~。
四、然鵝，在項目編譯時，我的圖片不見了？我可慌了。
一開始以為是所有圖片地址不對了，然而發現在template里這樣引入是可以的。
<image style="width: 200px; height: 200px; background-color:#eeeeee;"
src="/static/images/changeMarjors/apply-checkbox-fill.png"
></image>
那就是important的問題了。
然后以為是使用configureWebpack屬性覆蓋了其他屬性，可能是@別名被覆蓋掉了。
但是在測試組件時發現別名是在的。
然后我就百度了一天。url-loader 圖片丟失的問題。
發現網友都是在講，圖片打包丟失，相對位置的事情。
網友講得都對。可是我不是打包后丟失，我是在編譯后就丟失了。
一天無果后，我就打印了一下看看我引入的 img是什么
這個是什么？眼熟不？這是最開始出現問題的地址啊？氣吐血。早點看到這個地址我也不會百度一天！
我明明已經修改了url-loader的配置。地址已經改到images文件夾下面了。img文件夾根本不存在啊？正確地址應該是下面這個
如果我的配置不生效那么打包不會正確啊。如果生效那編譯不會出現原來的地址啊？
我真的是想破了腦袋。
五、多個url-loader配置混亂
后來我認真想了一下，出現兩個結果會不會是有兩個url-loader混亂使用。打包時使用我配置的，編譯時使用了另外一個。
這個也不是不可能，vue-cli默認配置好了webpack.config.js。都沒有暴露出配置。vue.config.js我也配置了一個。會不會在這里重復的？
還記得這張圖嗎？圈紅的是什么？
明明在眼前。我卻錯過了一天，再次吐血。
六、替換loader
下圖，要替換就要使用chainWebpack的語法。拿到loader的別名，就是下圖中的"svg"字符串，
要知道vue-loader的別名是什么？那怎么知道別名？
七、暴露webpack配置拿到別名。還是那張vue-cli官網。
然而我暴露失敗了。生成的input.js是空白的！，空白的！，空白的！
氣死我。
我沒解決這個問題，但是網友暴露成功了，再給個連接，去看這個鏈接里的圖片。
我自己暴露失敗是因為我是全局安裝的vue.2.9的版本、這個暴露命令是3.0和4.0版本的。我重新安裝4的就可以成功了
看到這行我都快哭了。
最后完成了我的配置
chainWebpack: config => {
const urlLoader = config.module.rule('images')
// 清除已有的所有 loader。
// 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。
urlLoader.uses.clear()
// 添加要替換的 loader
urlLoader
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options( {
limit: 1024*1, // 8k
name:'[path][name].[ext]', // 利用[path]路徑獲取文件夾名稱並設置文件名
fallback: 'file-loader', // 當超過8192byte時，會回退使用file-loader
context: path.resolve(__dirname,'./src'),//過濾掉[path]的相對路徑
publicPath: './' //采用根路徑
})
}
發現打印地址終於對了。
我也以為結束了。天真。
頁面是有兩張圖片的，一張是css背景圖引入，一張是image src import 引入。
現在出現的是背景圖。打印的地址是important引入的。
也就是說，我打印的地址，還是沒有找到。
還記得我百度一天的rurl-loader 圖片丟失的問題嗎？
八、相對地址問題
網友的鏈接里講了這句話：
但是CSS里相對路徑是相對於CSS文件，而JS文件相對路徑是相對於index.html。
導致引入同樣的圖片，在CSS和JS中指向了不同的目錄。
我打包對應頁面也確實是相對路徑，這個地址對於index.f3XXX.css是對的，
但是對於我生成的pages-mine-index.9616a8f8.js是錯誤的
正確應該是上級目錄下的static
../static/images/changeMarjors/apply-checkbox-fill.png
那么為什么會出現這個相對路徑？
是因為我們根目錄配置的publicPath和url-loader里的publicPath。
因為我在url-loader里的publicPath配置了，在解析圖片類型數據時使用的是url-loader里的publicPath，
因為我配置的都是一樣的。”./"所以都使用了這個地址。
那么我現在修改url-loader內的publicPath,使用絕對路徑。
publicPath: '/' //采用根路徑
這時我在看打包生成地址此時兩個都是絕對地址了。
這個時候頁面編譯也正常了。兩個圖片都正確顯示了。
盒子是import導入圖片，這是頁面代碼。
<template>
<view>
<view>我的頁面</view>
<view class="test" style="width: 200px; height: 200px;">
<!-- <image style="width: 200px; height: 200px; background-color: #eeeeee;"-->
<!-- src="/static/images/changeMarjors/apply-checkbox-fill.png"-->
<!-- ></image>-->
</view>
測試圖片
<image style="width: 200px; height: 200px;"
:src="img"
></image>
<nav-bar-layout>
<view slot="content">111111111111</view>
</nav-bar-layout>
</view>
</template>
<script>
import img from "@/static/images/changeMarjors/apply-checkbox-fill.png";
import NavBarLayout from "@/components/NavBarLayout"
// import img from "@/static/images/termPaper/1.gif"
console.log(img)
export default {
components:{
NavBarLayout
},
data() {
return {
img: img
}
}
}
</script>
<style lang="scss" scoped>
.test {
background-image: url(~@/static/images/termPaper/2.gif)
}
</style>
終於算結束了。
另外，修改vue.config.js是需要重新編譯才會生效的