vue -- 打包資源正確引用及背景圖引入

通常狀況下，經過webpack+vuecli默認打包的css、js等資源，路徑都是絕對的。css

但當部署到帶有文件夾的項目中，這種絕對路徑就會出現問題，由於把配置的static文件夾當成了根路徑，那麼要解決這種問題，就得引用相對路徑。html

解決辦法

打開webpack.prod.conf.jsvue

找到output：增長 publicPath: './', 便可，如圖：webpack

也可在config文件夾下的index.js中修改 assetsPublicPath: './'一樣也能夠達到資源的相對引用。git

背景圖引入問題

上面雖然解決了資源路徑的引用問題，可是資源裏面的背景圖片，不像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代碼，如圖所示：github

也能夠不改配置用數據的形式解決：web

<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，做者知道會有人有這個疑惑，因此做了詳情的解釋：vue-cli

You will notice in the project structure we have two directories for static assets: src/assets and static/. What is the difference between them?app

簡單翻譯一下ui

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裏的文件會找不到。

固然，打包的時候可能還有其餘的各類問題，這裏只是粗略的指出一點，網上教程也不少，但有用的很少，仍是得本身跑一遍纔可以檢驗是否正確。加油吧，騷年！