Vue專案部署遇到的坑（你肯定會遇到！）

yoUng9527發表於2018-12-01
Vue

#部署非ROOT環境下元件CSS中 background-img圖片問題

總所周知後臺部署程式碼的時候，是直接把我們通過npm run build(vue-cli生成專案) 的程式碼直接放到ROOT目錄的，即使你放到其他目錄我們通過config檔案build物件下面的

assetsPublicPath: '/clinet', // If you are deployed on the root path, please use '/' 打包訪問資源目錄

來配置，這樣在index.html中靜態資源是沒問題的，但是如果你在.vue檔案中像這樣使用背景圖

.back-img{
    position: relative;
    width:1273px;
    height: 665px;
    margin:0 auto;
    background:url(/static/imgs/bj.png) no-repeat; //這樣
    background-size:100% 100%
  }
複製程式碼

打包出來的的背景圖依然是 background:url(/static/imgs/bj.png) no-repeat; 因為vue-loader根本就不會處理它，但實際能訪問到圖片的路徑應該是background:url(/clinet/static/imgs/bj.png) no-repeat;。最蛋疼是我們把圖片都放到了static目錄裡面，如果要換的要瘋掉。沒辦法只能想辦法。。。

##：把圖片先上傳到雲伺服器，然後統一使用伺服器地址訪問，但是也要一個一個修改。。。放棄

##方法二：不用背景圖，換img，雖然少了請求，但是loader會把img轉成base64增加打包程式碼體量。。。放棄

##方法三：自己寫loader處理配置。。。今天要說的 百度一下很多介紹，這裡就不多說了。loader實際上是字串的處理，所以特別好理解 首先配置loader引數

    {
        test: /\.vue$/,
        loader:'background-loader',
        options:{
           assetsPublicPath:"/clinet" //和assetsPublicPath 儲存一致
         }
     }
      
複製程式碼

下面是loader核心程式碼

var loaderUtils = require("loader-utils");
var path = require("path");
module.exports = function(source){
	var _this = this;
	//獲取到.vue檔案，查詢是否包含style標籤，讀取配置項 assetsPublicPath 預設為 '/'
	if(process.env.NODE_ENV === 'production'){//生產環境才轉碼
		const options = loaderUtils.getOptions(this);
		let reg = /url\((.*)\)/g;
		return source.replace(reg,`url(${options.assetsPublicPath}$1)`);
	}
	return source
}
複製程式碼

這樣就解決了上面的問題，學習loader的寫法，有助於更加了解webpack，對新人會有幫助，下一次分享，我將給小夥伴分享外掛的寫法，希望對小夥伴門有幫助，文筆不好，噴子遠離！謝謝。

相關文章