菜蟲學習筆記：Vue Cli 圖片存放路徑

發表於 | 更新於 | In | 0 comments |
文章字數 : 549 | 所需閱讀時間 ≈ 2 分鐘

在使用Vue處理專案時，遇到圖片路徑存放的問題
原本在使用html時很直覺，但是在webpack打包時就會出現一些小問題

圖片可以是相對路徑和絕對路徑兩種

Vue Cli 2.0

1.圖片引入絕對路徑

如果 URL 是一個絕對路徑 (例如 /images/logo.png)，它將會被保留不變，指的是在打包時會當作字符串處理，保留地址不做任何的操作。

1
2
3
4
5
6
7
8
絕對路徑: 保留
./ => /
../ => /../
~: node_module
@ => ./src
css-loader
file.png => ./file.png
~module/file.png => module/file.png

2.圖片引入相對路徑

當你在 JavaScript、CSS 或 .vue 文件中使用相對路徑 (必須以 . 開頭) 引用一個靜態資源時，該資源將會被包含進入 webpack 的依賴圖中。
在其編譯過程中，所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會被解析爲一個模塊依賴，本意就是webpack會對以上的方式做處理，那麼問題來了？如何處理？

如果是相對路徑的圖片，在圖片一定大小的範圍內，會轉化爲base64 和 打包文件（dist）目錄下生成一張圖片（它們將會被替換爲基於你Webpack輸出配置自動生成的 URL）兩種方式

  • 這個大小的範圍是可以確定的，在vue.config.js文件中

  • 手動修改文件打包生成的路徑，在webpack.base.config.js文件中，修改即可（其實在在vue.config.js文件 同樣上面的地方添加name屬性修改也是一樣的）

  • 相對路徑 ./assets/login.png

    • 模組依賴: webpack 自動生成路徑: base on output config
    • 絕對路徑 /static/img/box.b7bc3af.png

  • 無前綴 assets/login.png

    • 相對路徑: 加上 ./

  • 根目錄 /assets/login.png

    • 還是根目錄

  • 毛毛蟲 ~/asset/login.png

    • 無前綴 assets/login.png
1
background-image:url(/static/images/arrow_d.png);

Vue Cli 3.0

Vue Cli 3 statci變爲public，裡面主要是存放靜態資源文件的
依據資料夾的階層出現路徑有可能為：

1
2
3
background-image:url(/images/arrow_d.png);
background-image:url(../images/arrow_d.png);
background-image:url(../../images/arrow_d.png);