問題

項目在開發環境下工作正常，當打包后圖片不見了，檢查元素后發現路徑出錯了。

圖片路徑是這樣：background: url(/static/img/bg_camera_tip.bd37151.png)，但該路徑下文件并不存在。

打包后文件目錄如下：

可以看到背景圖片的路徑應該是../../static而實際卻是/static，找到原因后就好解決了

方法一

查看build目錄下webpack.base.conf.js的配置，圖片文件會經過url-loader處理。

 module: {
 rules: [
 ...
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },
 ...
 ]
 }

它的作用是當文件大小小于limit限制時會返回一個base64串，其實就是把圖片資源編碼為base64串放在CSS文件里，這樣就可以減少一次網絡請求，因為每一張圖片都是需要從服務端去下載的。但是如果文件太大了就會導致base64串很長，那放在CSS文件里面就會導致文件很大，CSS的文件下載時間變長，就得不償失了，所以會有一個limit參數，在這個范圍內的才會被轉成base64串，它的單位是字節。對于這個問題，該loader還提供了一個publicPath參數，目的是修改引用的圖片地址，默認是當前路徑，那直接改它就可以了，即在options節點下添加一個參數publicPath: '../../'。

 module: {
 rules: [
 ...
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
 limit: 10000,
 publicPath: '../../', //你實際項目的引用地址前綴
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },
 ...
 ]
 }

方法二

webpack.base.conf.js里還有一條規則，每一個vue文件都會經過vueLoaderConfig處理

 module: {
 rules: [
 {
 test: /\.vue$/,
 loader: 'vue-loader',
 options: vueLoaderConfig
 },
 ...
 ]
 }

vueLoaderConfig位于build/vue-loader.conf.js，它又調用了build/utils.js的cssLoaders的方法。

 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader'
 })
 }

如果是生產環境options.extract值為true，會調用這個ExtractTextPlugin插件做處理，它的作用是抽離項目中引用的樣式文件到一個獨立的CSS文件中，這樣就可以一次加載所有的CSS文件，相當于CSS文件并行加載，可以減少網絡請求次數，更多優點及使用可以查看ExtractTextWebpackPlugin。回到這個問題，它還有一個參數就是publicPath，可以覆蓋所指定的loader的publicPath配置，那么就跟前面的配置一樣，可以給所有的loader統一配置引用文件的路徑地址。

另外這里的user:loader實際上是返回一系列的loader的集合，cssLoaders的返回是

 return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 less: generateLoaders('less'),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus'),
 styl: generateLoaders('stylus')
 }

這也就是即便你沒有在webpack.base.conf.js中配置sass-loader也能使用SASS語法的原因。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com