問(wèn)題
使用vue-cli2腳手架生成的默認(rèn)打包配置文件,npm run build
打包,部署項(xiàng)目到特定路徑下://ip:port/test/index.html
此時(shí)訪問(wèn)//ip:port/test/index.html可以正常訪問(wèn),但是引用的js和css等文件服務(wù)器響應(yīng)為404,此時(shí)我們查看資源請(qǐng)求路徑:
http://ip:port/static/css/app.[hash].csshttp://ip:port/static/js/app.[hash].js
可以看出,上面的靜態(tài)資源訪問(wèn)路徑是不正確的,我們正確的請(qǐng)求路徑應(yīng)該是
http://ip:port/test/static/css/app.[hash].csshttp://ip:port/test/static/js/app.[hash].js
原因
可以看出導(dǎo)致資源加載失敗的原因是路徑錯(cuò)誤,我們可以移步看看index.html文件,
<!DOCTYPE html> <html> <head> <title>project</title> <link href=/static/css/app.css rel=stylesheet> </head> <body> <div id=app></div> <script type=text/javascript src=/static/js/app.js> </script> ... </body> </html>
可以看出引入的css和js都是使用的絕對(duì)根目錄路徑,因此將項(xiàng)目部署到特定目錄下,其引入的資源路徑無(wú)法被正確解析。
解決
在webpack打包時(shí),使用相對(duì)路徑來(lái)處理靜態(tài)資源,修改build中資源發(fā)布路徑配置(build/config.js);
build: { ... // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', ...}
將assetsPublicPath: '/',更改為assetsPublicPath: './',再進(jìn)行打包,并將資源部署到特定路徑下,然后訪問(wèn),此時(shí)index.html可以正常訪問(wèn),同時(shí)js和css資源也可以正常加載訪問(wèn)了。
css中引入assets目錄下的圖片資源出錯(cuò)
我們經(jīng)常這樣引用一個(gè)img圖片
background: url('static/img/bg.png');
但是打包后看到這個(gè)圖片的引用地址是這樣的。
http://ip:port/test/static/css/static/img/bg.png
可以看出css中圖片的路徑存在問(wèn)題了,分析打包過(guò)程,css是在js中引入的或是寫(xiě)在vue文件中的,css文件首先被less,postcss等處理,處理后會(huì)被ExtractTextPlugin處理,ExtractTextPlugin將js中的css全部抽離至app.css文件中。
解決方法一
將options.extract設(shè)置為false
options.extract: false,
關(guān)閉抽離css功能,再次打包并部署,此時(shí)你會(huì)發(fā)現(xiàn)沒(méi)有css文件了,css文件全部在app.js文件中,通過(guò)js將css注入到index.html文件中,此時(shí)圖片的訪問(wèn)路徑是相當(dāng)index.html文件的,所以可以正常訪問(wèn)
解決方案二
設(shè)置ExtractTextPlugin插件中的publicPath
ExtractTextPlugin插件是為了將css從js文件中抽離出來(lái),我們可以通過(guò)配置ExtractTextPlugin的靜態(tài)資源路徑參數(shù)來(lái)達(dá)到同樣的效果,build目錄下的utils.js文件,修改publicPath: '../../';
// Extract CSS when that option is specified// (which is the case during production build)if (!options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' })} else { return ['vue-style-loader'].concat(loaders)}
再次打包部署,發(fā)現(xiàn)此時(shí)的圖片訪問(wèn)路徑為'../../static/img/bg.png';
publicPath 屬性值為打包后的 app.css文件至index.html文件的相對(duì)路徑
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注