詳解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，檢視引入的資源路徑如下：

二、分析

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

三、解決

在打包時需要使用相對路徑來處理靜態資源，更改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)

五、再解決

首先將options.extract設為false，關閉抽離css功能，再次打包並部署至特定目錄，訪問：http://ip:port/public/springactivity/index.html，頁面正常顯示，大功即將告成。

因此使用extracttextplugin外掛程式時還需要配置靜態資源路徑引數，通過查詢資料，得知可以通過新增publicpath:"../../"解決該問題：需要修改build資料夾下的utils.js**，如圖所示：

publicpath配置後，css檔案中引入的檔案路徑前新增了該路徑配置；

資源也可以直接放在vue-cli生成的static目錄下規避上述問題，但是通過這種方式名稱中無法增加md5字串，不利於版本控制。