本文主要解決兩個問題：

1、vue-cli釋出時 js，css檔案路徑錯誤

2、vue-cli釋出時js、css檔案正常，但是圖片路徑錯誤

問題:

vue-cli 腳手架生成的預設打包配置檔案情況下執行 npm run build 打包後，即可開始專案部署

專案部署根據公司要求不同大致分為一下倆種部署方式：

1、伺服器放置打包後生成的dist資料夾

此種部署方式，需要將config.js檔案下index.js中的assersPublishPath，改為‘/’，

生成的檔案目錄如下：

入口html檔案index.html的css，js引入都是從專案的根目錄下開始。

生生的index.html，所有js，css為直接從根目錄下引用

css中的圖片資源引用都為：

也是直接從跟目錄下的static檔案讀取，在此之後，再次開啟你的地址，哇，沒有一片紅了~

2、伺服器放置整個專案，這樣的情況一般用於github首頁使用vue專案時

（小技巧：以這種方式部署的時候，無法釋出線上去看，只需要打包後看dist下的index.html能否正常執行即可~）

 依舊按照上面的配置進行打包，釋出之後，發現一片大紅~

js，css阿西吧，怎們全部沒找到？

這就對了，因為此時的 ‘/’ 根路徑是整個專案的根路徑，在看看此時的專案結構：

這個紅圈圈static是用來放置三方類庫，黑色圈圈的static才是真正打包後生成的js，cs，img等資源的位置，所以~錯誤原因找到了~

分析：路徑不對，config.js檔案下index.js中的assersPublishPath，改為‘./’，當前資料夾下的static即可。

修改打包後再去看看此時的js，css引用路徑

簡直完美~，js，css都已經正常引入了，當你興高采烈的開啟網頁的時候。。。。。。。。怎麼還有報錯。。。

圖片路徑什麼鬼，又不對了。。。。。。

分析：

正常路徑應為http://localhost:3333/resume/dist/static/img/music2.3278dbf.png

但是引用路徑http://localhost:3333/resume/dist/static/css/static/img/music2.3278dbf.png，

對比一下發現多了兩層，/static/css, 看來跟css 有一定關係~，這時候我們去看看css裡面的引入路徑

原來是css中的引入為static/img/***.jpg，但是css檔案相對於index的相對路徑為 /static/css,

恍然大悟~原來如此，但是怎麼解決，腦殼兒疼。。。。

經過多方查閱資料，github查詢終於找到了解決大辦法：

那就是在build下utils.js中新增一下黑框括起來的程式碼即可

參考https://github.com/vuejs-templates/webpack/issues/166

（解釋：pubicpath為打包後app.css至index.html的相對路徑）

打包後，此時再開啟你的網頁~感動的稀里嘩啦~~~終於正常了，可以訪問了！