webpack踩坑記--打包事後資源路徑404問題

前言

該文章是基於低版本 vue-cli2.x 建立的項目，vue-cli3.0 之後修改 webpack 配置須要在項目根目錄下新建一個 vue.config.js，不過都是換湯不換藥

項目配置

頁面很簡單，一段文字，和一張背景圖片

下面幾個配置項比較重要:

• assetRoot: 打包後文件存放路徑
• assetsSubDirectory：靜態資源路徑(除 index.html 其餘資源將被放入這裏)
• assetsPublicPath：index.html 裏面引用資源的的路徑前綴

假設咱們作以下的配置

# /config/index.js
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',

訪問白屏問題

打包後 dist 的目錄是這樣的

# dist
┌── static
│   └── css
│   │   └── *.css
│   └── img
│   │   └── *.jpg
│   └── js
│   │   └── *.js
└── index.html

而後，雙擊打開 index.html，what？怎麼白屏了

F12 看一下，發現這裏的資源路徑是有問題的，由於 static/js/xxx 表明的是根路徑下，而咱們打開是在項目目錄下找不到資源，天然就白屏了。

打包事後的目錄結構是固定的，而 index.html 和 static 同級，固能夠用相對路徑引入 static 下的資源

配置:

assetsSubDirectory：'./'

配置完成後，再打包訪問，文字出來，背景圖片裂開了......

背景圖片裂開

F12 發現，圖片資源路徑有問題：static/img/vague_bg.9cfff92.png。由於是在 css 裏引入的 img，結合打包出來的目錄結構，正確的應該是 /static/img/xxx，但問題是前面已經設置了 assetsSubDirectory 爲相對路徑.......

有補救方法，在 xxx.css 裏面回退兩個路徑不就回到了 static 目錄了嗎？

配置 url-loader

# /build/webpack.base.conf.js 設置rules
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 10000,
        name: utils.assetsPath("img/[name].[hash:7].[ext]"),
        publicPath: "../../"
      }
    }
  ]
},

設置完，再打包訪問，perfect~

後言

有些人可能會問，爲何不一開始直接設置 assetsSubDirectory：'/'，即根路徑不也能夠解決問題嗎？

是的，沒錯，確實能夠解決問題。可是我嗶哩嗶哩一大堆是提供一些問題的解決思路，本身踩過的坑和如何排坑的。若是設置了跟路徑，那麼就限死了當前資源只能在根路徑了，可能項目會集成到後端項目中(也能夠經過目錄映射解決)，不必定是在根路徑下。設置當前 dist 下的資源位相對路徑確保在任何環境下資源路徑都沒有問題。

該篇文章是 18 年剛畢業的時候遇到的問題，以前寫在本身的 blog 裏面，由於疏於管理本身的 blog 被黑，如今分享出來，記錄本身的心路歷程。

---

END