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，对新人会有帮助，下一次分享，我将给小伙伴分享插件的写法，希望对小伙伴门有帮助，文笔不好，喷子远离！谢谢。

相关文章：