詳解vue靜態資源打包中的坑與解決方案

　　本文主要解決：

　　1、vue-cli默認配置打包后部署至特定路徑下靜態資源路徑錯誤問題;

　　2、靜態資源打包使用相對路徑后css文件引入圖片路徑錯誤問題。

一、問題

　　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

二、分析

　　由上可以看出是資源打包路徑有誤，打包后的資源使用了絕對根目錄路徑，因此將項目部署到特定目錄下，其引入的資源路徑無法被正確解析。

三、解決

　　在打包時需要使用相對路徑來處理靜態資源，更改build中資源發布路徑配置（config/index.js, build對象）：

　　將 assetsPublicPath: '/'  改為  assetsPublicPath: './'，再次打包，並將資源部署到特定路徑下，然后訪問，此時index.html可以正常訪問，同時js和css資源也可以正常訪問，但是css中引入的assets目錄下的大圖片資源出錯了（服務端404）

四、再分析

　　查看引入的圖片資源路徑如下：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)

五、再解決

　　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文件中的圖片資源路徑一致，因此圖片能夠被正常訪問。

　　現在很確定知道問題出在哪了，即：ExtractTextPlugin抽離css文件時沒有轉換資源引入路徑，導致app.css引入了相對app.css目錄為"static/img/ .png"的靜態資源，該路徑相對index.html即為：static/css/static/img/ .png。

　　因此使用ExtractTextPlugin插件時還需要配置靜態資源路徑參數，通過查詢資料，得知可以通過添加publicPath:"../../"解決該問題：需要修改build文件夾下的utils.js代碼，如圖所示：

　　打包部署到特定目錄下后訪問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字符串，不利於版本控制。

本人很懶,轉自:https://www.cnblogs.com/goloving/p/8904545.html