一般情況下，通過webpack+vuecli默認打包的css、js等資源，路徑都是絕對的。
但當部署到帶有文件夾的項目中，這種絕對路徑就會出現問題，因為把配置的static文件夾當成了根路徑，那么要解決這種問題，就得引用相對路徑。
解決辦法
打開webpack.prod.conf.js
找到output：增加 publicPath: './', 即可，如圖：
也可在config文件夾下的index.js中修改 assetsPublicPath: './'同樣也可以達到資源的相對引用。
背景圖引入問題
上面雖然解決了資源路徑的引用問題，但是資源里面的背景圖片，不像index.html中加載資源一樣，通過./static/js/app.js引用可以正常加載，圖片資源是通過css加載的，如 background:url('../../static/img/base/title.png'); 被相對打包后變成了url(static/img/base/title.0cf9ae0.png) 所以我們要保留css引用圖片的正常路徑，就需要修改build文件夾下的utils.js代碼，如圖所示：
也可以不改配置用數據的形式解決：
<div :style="bg"></div>
export default {
data() {
return {
bg: {
backgroundImage: "url(" + require("../../static/img/base/title.png") + ")",
backgroundRepeat: "no-repeat"
}
}
},
assets 和static的區別
請參考 vue-cli 的 webpack 模板的文檔 - Handing Static Assets，作者知道會有人有這個疑惑，所以作了詳情的解釋：
You will notice in the project structure we have two directories for static assets:
src/assetsandstatic/.What is the difference between them?
簡單翻譯一下
Webpacked Assets
為了回答這個問題，我們首先需要了解Webpack如何處理靜態資產。在 *.vue 組件中，所有模板和CSS都會被 vue-html-loader 及 css-loader 解析，並查找資源URL。例如，在 <img src="./logo.png">和 background: url(./logo.png) 中，"./logo.png" 是相對的資源路徑，將由Webpack解析為模塊依賴。
因為 logo.png 不是 JavaScript，當被視為模塊依賴時，需要使用 url-loader 和 file-loader處理它。vue-cli 的 webpack 腳手架已經配置了這些 loader，因此可以使用相對/模塊路徑。
由於這些資源可能在構建過程中被內聯/復制/重命名，所以它們基本上是源代碼的一部分。這就是為什么建議將Webpack 處理的靜態資源放在 /src 目錄中和其它源文件放一起的原因。事實上，甚至不必把它們全部放在 /src/assets：可以用模塊/組件的組織方式來使用它們。例如，可以在每個放置組件的目錄中存放靜態資源。
"Real" Static Assets
相比之下，static/ 目錄下的文件並不會被Webpack處理：它們會直接被復制到最終目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是通過在config.js文件中的build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。
任何放在 static/ 中文件需要以絕對路徑的形式引用：/static/[filename]。如果更改assetSubDirectory 的值為 assets，那么路徑需改為 /assets/[filename]。
簡單說，就是放在assets中的文件會被配置過的webpack處理，而static只是簡單的拷貝。
如下圖：在項目中寫的是可以訪問到的相對路徑（請注意右側的publicPath，在build/utils.js/exports.cssLoaders中）：
下圖為打包編譯后的結果：
由此可見，assets相對於.vue文件的位置更重要，若將publicPath改為../../../相對於static事實證明這樣的時候關於assets里的文件會找不到。
當然，打包的時候可能還有其他的各種問題，這里只是粗略的指出一點，網上教程也很多，但有用的不多，還是得自己跑一遍才能夠檢驗是否正確。加油吧，騷年！