如何解决关于Vue背景图打包之后访问路径错误的问题
本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决，内容挺不错的，现在分享给大家，也给大家做个参考。
案例环境
通过vue-cli脚手架创建的vue项目
在项目打包的时候遇到了背景图片路径出错的问题，经过谷歌一番，发现是在配置的时候对图片的限制大小过小造成的
首先，出错点在url-loader上面。
// url-loader配置
// build/webpck.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于10000B的文件进行base64转码，就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]') 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于10KB的图片转为base64，大于10KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。
// 目前我们的目录结构
index.html
static
|--img
|--'picname'
|--css
|--app.css
|--js
|--app.js我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。
解决办法
1、使用小图片作为背景图片（建议）：
将小于10KB的图片作为背景图片，如果有大于10KB的图片作为img图片。
2、修改url-loader的limit值（不建议）：
从上面分析可知，当图片转为base64就没有路径错误的问题，保证自己的背景图片都能转为base64就可以防止该错误发生,将limit的值改为你的背景图最大那一张的值还大一点就行，换算为B的单位
3、将css不要单独打包出来（不建议）：
直接通过css-loader和style-loader打包到js中，js自动创建style标签，这样，背景图片的访问路径就是通过index.html路径访问了，不过该解决方案也不建议。会导致js过大，和图片过大不建议转base64一个道理。
4、使用绝对路径的图片地址路径（建议）
建议：使用小图片作为背景图片，大图片用img标签。首先得分清背景图片和图片img的一些区别，就各人理解而言，背景图片是用来修饰网页的，与实际内容无关的东西，使用背景图片。如果与内容有关的东西都应该使用img标签算作网页结构的内容。修饰的图片尽量的小，也可以使用图片压缩等策略减小图片大小。
不建议：不建议修改limit值的原因是，url-loader的配置是针对整个项目的图片，修改了limit值也等于让html中img标签的图片也跟着进行了base64的转换，而对于base64的转换的缺点是他会增大图片原本的体积，如果对大图进行了转base64会造成你的js文件过大，从而增加了加载js时间过长。
关于base64
优点：base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道，http请求每次建立都会占用一定的时间，对于小图请求来说，可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求，保证页面加速渲染的一种手段。
缺点：base64缺点就是之前提到的，他会增加图片本身的大小，对小图片来说，增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长，这种取舍是划算的。可是对于大图来说，这样的取舍是不划算的。
举个例子
例子：（以下数据都是随便模拟，看看思路就行）
假如每次建立http时长为0.1s，网络传输为100KB/s，每次转base64增加体积为百分之二十；
一张10KB的图片通过http请求下载为0.2s，他转为base64之后为12KB，在js下载中，增加了12KB的大小，所以增加0.12S 所以转base64能优化0.08s的页面加载速度；
一张100KB的图片通过http请求的速度是1.1s。转base64之后大小为120KB，他会增加js的大小120KB，所以增加加载时间1.2s。这样一算下来，转为base64之后，并不能优化页面加载速度，反而拖慢了0.1s的加载速度，为不划算。
思考：
在开发过程中，处理加载速度之外我们还得考虑并行下载的问题。如果全在一个js中，这个js没下载完成之前，图片也是没有下载的，也就是转base64之后，可以认为js和图片是串行下载的。而走http请求，图片是可以和js并行下载的。所以实际上需要更小的图片才能更划算
绛旓細妗堜緥鐜閫氳繃vue-cli鑴氭墜鏋跺垱寤虹殑vue椤圭洰鍦ㄩ」鐩鎵撳寘鐨勬椂鍊欓亣鍒颁簡鑳屾櫙鍥剧墖璺緞鍑洪敊鐨勯棶棰橈紝缁忚繃璋锋瓕涓鐣紝鍙戠幇鏄湪閰嶇疆鐨勬椂鍊欏鍥剧墖鐨勯檺鍒跺ぇ灏忚繃灏忛犳垚鐨勯鍏堬紝鍑洪敊鐐瑰湪url-loader涓婇潰銆// url-loader閰嶇疆// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url...
绛旓細1銆侀棶棰樻弿杩板湪椤圭洰寮鍙戜腑,褰撴垜浠氳繃npm run build鎵撳寘涔嬪悗灏嗘枃浠舵斁鍦ㄦ湇鍔″櫒涓婃椂閫氬父浼氬嚭鐜板浘鐗囧け鏁堥棶棰,鎺у埗鍙颁腑鎻愮ず鏌愪釜鍥剧墖娌℃湁鎵惧埌锛404閿欒锛夛紝杩欎簺鍥剧墖鍙互鏄互src寮曞叆鐨勫浘鐗囷紝 涔熷彲浠ユ槸css涓畾涔夌殑鑳屾櫙鍥剧墖銆傚浘鐗囪兘鍚︽樉绀轰笌浣犵殑闈欐佽祫婧愭枃浠跺瓨鍦ㄤ綅缃拰寮曞叆鐨勮矾寰勭洿鎺ョ浉鍏筹紝涓嬮潰鏄垜鐨勫叾涓竴涓」鐩殑...
绛旓細鎵撳寘鐨勮祫婧愪负浜嗗洖绛旇繖涓棶棰橈紝鎴戜滑棣栧厛瑕佹槑鐧絎ebpack鏄浣曞鐞嗛潤鎬佽祫婧愮殑銆傚湪*.vue缁勪欢閲岋紝鎵鏈夌殑templates鍜孋SS妯″潡閮借vue-html-loader鍜宑ss-loader瑙ｆ瀽鏉ユ煡鎵捐矾寰刄RL銆備妇涓緥瀛愶紝鍦ㄥ拰鑳屾櫙background: url(./logo.png)锛屸./logo.png鈥濇槸涓涓浉瀵硅矾寰勶紝浼氳Webpack褰撳仛涓涓緷璧栧姞杞姐備絾鏄洜涓簂ogo.png...
绛旓細2銆乻tatic鏂规硶绗竴姝ワ細鍥剧墖鏀惧湪static鏂囦欢澶癸紝鍦╠ata瀵硅薄鐨勪竴涓噷瀹氫箟灞炴ro_img,灞炴у兼槸鍥剧墖涓.vue鐨勭浉瀵硅矾寰勭浜屾锛氬湪template涓 缁欐爣绛剧粦瀹氬睘鎬у埛鏂扮湅鏁堟灉瑙ｅ喅vue缁勪欢css涓鑳屾櫙鍥剧墖璺緞鎶ラ敊闂鍓嶆彁鏄綘鐢ㄤ簡vue-cil锛岄偅涔堝湪build鐩綍涓嬫壘鍒皍tils.js涓殑ExtractTextPlugin.extract({}),閲岄潰娣诲姞涓嬮潰杩...
绛旓細1銆佹墦寮Vue锛岀偣鍑诲乏涓嬭鈥+鈥濋夐」锛2銆佺劧鍚庡湪鍑虹幇鐨勯〉闈㈤噷鐐瑰嚮宸︿笂瑙鈥滆棰戔濇寜閽紝灏卞彲浠ュ幓鍏朵粬鏂囦欢澶归噷閫夋嫨鐓х墖杩涜娣诲姞缂栬緫浜嗐俈UE鏄痠OS鍜孉ndroid骞冲彴涓婄殑涓娆炬墜鏈鸿棰戞媿鎽勪笌缇庡寲宸ュ叿锛屽厑璁哥敤鎴烽氳繃绠鍗曠殑鎿嶄綔瀹炵幇瑙嗛鐨勬媿鎽勩佸鍏ヨ棰戠殑鍓緫銆佽〃鐜板姏鐨勭粏璋冦佹敼鍙樻护闀溿佸姞璐寸焊鍜岃儗鏅煶涔愮瓑鍔熻兘锛岃交鏉惧湪...
绛旓細1. 鑳屾櫙瑙嗛 Web 椤甸潰鐨勬棦鏈夊疄鐜版柟寮忓浗澶栨湁涓涓緢濂界殑缃戠珯 銆孋overr銆 锛屾彁渚涗簡瀹屽杽鐨勬暀绋嬪拰瑙嗛璧勬簮锛屽府鍔╁墠绔紑鍙戣呮瀯寤洪叿鐐殑鑳屾櫙瑙嗛涓婚〉锛岀綉绔欐晥鏋滅ず渚嬪涓嬪浘鎵绀猴細 鏁欑▼濡備笅鎵绀猴細 浠庡浘涓互鍙婃垜鐨勫疄璺靛彲浠ュ緱鍑轰互涓嬭鐐癸細璇ユ暀绋嬩娇鐢ㄤ簡 jQuery 銆傜敱浜庢垜浠兂瑕佷娇鐢 Vue.js锛屽垯 jQuery 鍙瀹屽叏鏇夸唬鎺...
绛旓細璁剧疆width鍜宧eight 鐧惧垎姣
绛旓細璋冪敤鎵嬫満閲岀殑灏忚棰戙佸彲浠ョ粰瑙嗛鍔犱笂LOGO銆佸湪鍙戦佸墠杩涜棰勮銆vue瑙嗛鍓緫杞欢鏄瑙嗛婧愯繘琛岄潪绾挎х紪杈戠殑杞欢锛屽睘浜庡濯掍綋鍒朵綔杞欢鑼冪暣銆傝蒋浠堕氳繃瀵瑰姞鍏ョ殑鍥剧墖銆鑳屾櫙闊充箰銆佺壒鏁堛佸満鏅瓑绱犳潗涓庤棰戣繘琛岄噸娣峰悎锛屽瑙嗛婧愯繘琛屽垏鍓层佸悎骞讹紝閫氳繃浜屾缂栫爜锛岀敓鎴愬叿鏈変笉鍚岃〃鐜板姏鐨勬柊瑙嗛銆
绛旓細闇姹傦細鏈枃鏄vue涓噰鐢╡lementui 鏃ュ巻缁勪欢锛屾牴鎹笉鍚岀殑鍊艰瀹氫笉鍚屾棩鏈熺殑鑳屾櫙棰滆壊鍧楋紝甯屾湜鎴戣俯杩囩殑鍧戣兘缁欎綘鑺傜害寮鍙戞椂闂淬
绛旓細浣跨敤vue缁撳悎涓ゅ紶鍥剧墖鍗冲彲銆 鎴戜滑鍙互灏哻amvas褰撴垚鏄竴寮犲浘鐗囷紝褰撴垜浠幓娓叉煋鍏朵腑涓寮犲浘鐗囩殑鏃跺欙紝瀹冧細榛樿浣跨敤涓や釜鍍忕礌鐐圭殑瀹藉害鍘绘覆鏌擄紝杩欐椂鍙渶瑕佷娇鐢╲ue锛屾妸涓ゅ紶鍥剧墖涔嬮棿鐨勭粨鍚堝闂撮殧寮灏卞彲浠ヤ簡銆
