vue-cli 項目，css文件引入圖片路徑問題

1. vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路徑的含義

assetsRoot: path.resolve(__dirname, '../dist'),  
assetsSubDirectory: 'static',
assetsPublicPath: '/',

assetsRoot 資源根路徑 項目打包後存放的路徑 即項目目錄下的dist文件
assetsSubDirectory 資源子目錄 存放靜態資源文件的static
assetsPublicPath 資源公共路徑

打包之後的文件路徑爲 assetsPublicPath+assetsSubDirectory : /static/img/xxx.jpg

---

2.JS和CSS引用圖片路徑

html頁面中，引用JS腳本和CSS文件的機制是不一樣的。

• 對於JS腳本，html是把腳本加載到頁面中一起解析。
• 而對CSS文件，則僅僅是提供一個連接，並不會將其加載到html頁面中。

這兩者的區別很重要，當我們要引用一個圖片時，在JS文件中要以引用它的html文件的路徑爲準；而在CSS文件中，要以該CSS文件的路徑爲準。

這也就是爲什麼vue-cli 項目中，css文件引入圖片會有路徑問題

---

3. 解決辦法1——:style

（1）在data裏面導入這張圖片：

bg:require(‘./openIndexBG2.jpg’)

（2）然後在template裏面對需要background-image屬性的標籤做個綁定，例如：

:style=”{backgroundImage: ‘url(‘ +bg + ‘)’}”

這樣就可以避開因打包而造成的的路徑問題,但是如果你要引入很多背景圖，寫data裏還是有點噁心！

4. 解決辦法2——絕對路徑

查了下webpack關於路徑處理的文檔，使用絕對路徑的時候會被直接忽略，例如:

background-image: url("/static/img/baseBg.png");//打包後原封不動

此方案優點就是路徑簡潔明瞭，打包的時候會轉爲相對路徑便於項目發佈，缺點就是IDE無法識別，會提示錯誤。

---

5. 解決辦法3——ExtractTextWebpackPlugin（推薦）

主要是需要單獨爲 css 配置 publicPath 。

ExtractTextWebpackPlugin 提供了一個 options.publicPath 的 api，可以爲css單獨配置 publicPath 。

對於用 vue-cli 生成的項目，dist 目錄結構如下：

dist
├── index.html
└── static    
  ├── css    
  ├── img    
  └── js

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：該publicPath會覆蓋output.publicPath

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 根據目錄結構自由調整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

最後附上 extract-text-webpack-plugin 的文檔。
https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/README.md

---

6. 解決辦法4

在比較小的的圖片的前提下可以使用background-image，打包時會自動轉換爲base64