background: url('./src/assets/theme/logo_blue.png') no-repeat center center;
正確的寫法
background: url('~@/assets/theme/logo_blue.png') no-repeat center center;
那么問題來了,
1.之前這樣寫為什么沒有錯?
2.為什么要這么寫? ~和@是什么意思呢?
第一個問題:查資料發現,
vue2.5及以下版本以上兩種寫法都沒有問題, 2.6就出現這個問題,應該和webpack配置相關 .
vue2.6用的是webapack4.0(待我學習下webpack4.0的官方文檔)
第二個問題: webpack資源處理的規則,分為相對路徑,沒有前綴的路徑,帶~的路徑,相對根目錄的路徑
1.相對路徑: "./assets/logo_blue.png"
2.沒有前綴的路徑 "assets/logo_blue.png" 被webpack解析為 相對路徑
3.帶~的路徑 "~@/assets/theme/logo_blue.png" 被webpack解析為 require(src/assets/theme/logo_blue.png) 動態引入
@在webpack 被resolve.alias配置下等價於/src
4.相對根目錄的路徑 "/assets/logo_blue.png" webpack不解析