您好,登錄后才能下訂單哦!
本文主要解決
①.vue-cli默認(rèn)配置打包后部署至特定路徑下靜態(tài)資源路徑錯(cuò)誤問題;
②.靜態(tài)資源打包使用相對路徑后css文件引入大圖片路徑錯(cuò)誤問題。
1、問題
vue-cli 腳手架生成的默認(rèn)打包配置文件情況下運(yùn)行 npm run build 打包后,部署項(xiàng)目至特定路徑下:如:
//ip:port/public/springActivity/
此時(shí)訪問:
http://ip:port/public/springActivity/index.html
index.html 可以正常訪問,但是引用的js,css等文件服務(wù)器響應(yīng)均為404,查看引入的資源路徑如下:
http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
http://ip:port/static/js/app.815851e87b083afb82bf.js
2、分析
由上可以看出是資源打包路徑有誤,打包后的資源使用了絕對根目錄路徑,因此將項(xiàng)目部署到特定目錄下,其引入的資源路徑無法被正確解析。
3、解決
在打包時(shí)需要使用相對路徑來處理靜態(tài)資源,更改build中資源發(fā)布路徑配置(config/index.js, build對象):
將 assetsPublicPath: '/' 改為 assetsPublicPath: './',
再次打包,并將資源部署到特定路徑下,然后訪問:
此時(shí)index.html可以正常訪問,同時(shí)js和css資源也可以正常訪問,但是css中引入的assets目錄下的大圖片資源出錯(cuò)了(服務(wù)端404)
4. 再分析
查看引入的圖片資源路徑如下:
http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png
實(shí)際項(xiàng)目中資源路徑如下:
index.html static/ |--js/ |--*.js |--css/ |--*.css |--img/ |--*.png
很明顯圖片引入路徑有誤。分析圖片引入路徑,發(fā)現(xiàn)路徑均多了"/static/css"兩層目錄,猜測是css目錄下的css文件引入圖片路徑為"/static/img/question_bg.61a2825.png" , 查看css文件,css中引入圖片路徑如下:
background:url(static/img/question_bg.61a2825.png)
5、在解決
css文件中路徑存在問題,肯定又是打包哪個(gè)環(huán)節(jié)資源路徑?jīng)]有配置好,分析打包過程,css是在js中引入的或是寫在vue文件中的,css文件首先被less,postcss等處理,處理后會(huì)被ExtractTextPlugin處理,ExtractTextPlugin將js中的css全部抽離至app.css文件中。
首先將options.extract設(shè)為false,關(guān)閉抽離css功能,再次打包并部署至特定目錄,訪問:http://ip:port/public/springActivity/index.html, 啪,頁面正常顯示,大公即將告成。
分析打包后的文件,發(fā)現(xiàn)沒有了css文件,發(fā)現(xiàn)css文件全部在app.js文件中;通過js將css注入 index.html文件中,因此css文件中引入的圖片資源路徑應(yīng)該是相對于index.html文件路徑的,即:"static/img/question_bg.61a2825.png",這與下面css文件中的圖片資源路徑一致,因此圖片能夠被正常訪問。
background:url(static/img/question_bg.61a2825.png)
現(xiàn)在很確定知道問題出在哪了,即:ExtractTextPlugin抽離css文件時(shí)沒有轉(zhuǎn)換資源引入路徑,導(dǎo)致app.css引入了相對app.css目錄為"static/img/ .png"的靜態(tài)資源,該路徑相對index.html即為:static/css/static/img/ .png。
因此使用ExtractTextPlugin插件時(shí)還需要配置靜態(tài)資源路徑參數(shù),通過查詢資料,得知可以通過添加publicPath:"../../"解決該問題:
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:"../../" //添加 }) }
打包部署到特定目錄下后訪問index.html文件,頁面一切正常,app.css文件正常引入,圖片資源也正常引入,查看app.css文件引入圖片資源方式如下:
background:url(../../static/img/question_bg.61a2825.png
publicPath配置后,css文件中引入的圖片文件路徑前添加了該路徑配置;
publicPath 屬性值為打包后的 app.css文件至index.html文件的相對路徑
圖片資源也可以直接放在vue-cli生成的static目錄下規(guī)避上述問題,但是通過這種方式圖片名稱中無法增加md5字符串,不利于版本控制
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。