本篇文章主要介紹了詳解vue靜態資源打包中的坑與解決方案，本文主要解決路徑問題，現在分享給大家，也給大家做個參考。
本文主要解決
①.vue-cli預設配置打包後部署至特定路徑下靜態資源路徑錯誤問題;
②.靜態資源打包使用相對路徑後css檔案引入大圖片路徑錯誤問題。
1、問題
vue-cli 在腳手架產生的預設打包設定檔情況下執行npm run build 打包後，部署專案至特定路徑下：如：
#/ /ip:port/public/springActivity/
此時造訪：
http://ip:port/public/springActivity/index.html
index.html 可以正常訪問，但是引用的js，css等檔案伺服器回應均為404，查看引入的資源路徑如下：
http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
# http://ip:port/static/js/app.815851e87b083afb82bf.js
2、分析
從上可以看出是資源打包路徑有誤，打包後的資源使用了絕對根目錄路徑，因此將專案部署到特定目錄下，其引入的資源路徑無法被正確解析。
3、解決
在打包時需要使用相對路徑來處理靜態資源，更改build中資源發布路徑配置（config/index.js, build物件）：
將assetsPublicPath: '/' 改為 assetsPublicPath: './',
再次打包，並將資源部署到特定路徑下，然後訪問：
此時index.html可以正常訪問，同時js和css資源也可以正常訪問，但是css中引入的assets目錄下的大圖片資源出錯了（服務端404）
#4. 再分析
查看引入的圖片資源路徑如下：
http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png
實際專案中資源路徑如下：
index.html
static/
|--js/
|--*.js
|--css/
|--*.css
|--img/
|--*.png
登入後複製
很明顯圖片引入路徑有誤。分析圖片引入路徑，發現路徑均多了"/static/css"兩層目錄，猜測是css目錄下的css文件引入圖片路徑為"/static/img/question_bg.61a2825.png" , 查看css文件，css中引入圖片路徑如下：
background:url(static/img/question_bg.61a2825.png)
5、在解決
css檔案中路徑存在問題，肯定又是打包哪個環節資源路徑沒有配置好，分析打包過程，css是在js中引入的或是寫在vue檔案中的，css檔案首先被less，postcss等處理，處理後會被ExtractTextPlugin處理，ExtractTextPlugin將js中的css全部抽離至app.css檔案。
首先將options.extract設為false，關閉抽離css功能，再次打包並部署至特定目錄，訪問：http://ip:port/public/springActivity/index.html, 啪，頁面正常顯示，大公即將告成。
分析打包後的文件，發現沒有了css文件，發現css檔案全部在app.js檔案中；透過js將css注入index.html檔案中，因此css檔案中引入的圖片資源路徑應該是相對於index.html檔案路徑的，即:"static/img/question_bg.61a2825.png",這與下面css檔案中的圖片資源路徑一致，因此圖片能夠被正常存取。
background:url(static/img/question_bg.61a2825.png)
現在很確定知道問題出在哪裡了，即：ExtractTextPlugin抽離css檔案時沒有轉換資源引入路徑，導致app. css引進了相對app.css目錄為"static/img/ .png"的靜態資源，該路徑相對index.html即為：static/css/static/img/ .png。
因此使用ExtractTextPlugin插件時還需要配置靜態資源路徑參數，透過查詢資料，得知可以透過新增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目錄下規避上述問題，但是透過這種方式圖片名稱中無法增加md5字串，不利於版本控制
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在jQuery中實現碰到邊緣反彈的動畫效果該如何做？
在vue cli webpack中如何使用sass（詳細教學）
在jQuery中如何改變P標籤文字值
#
以上是在vue中靜態資源如何打包的詳細內容。更多資訊請關注PHP中文網其他相關文章！
