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，對新人會有幫助，下一次分享，我將給小夥伴分享插件的寫法，但願對小夥伴門有幫助，文筆很差，噴子遠離！謝謝。