想必使用 vue.js 開發的朋友應該都有使用 vue-cli 開發吧~
但最近才對 vue-cli 中的 webpack-base-conf.js 裡面的 assetsPublicPath 有了解
這個設定其實是根目錄的意思
在預設條件下本機 (localhost) 是以 / 為根目錄
而遠端 (remote) 也是 / 為根目錄
這是在有透過像是 iis
將遠端資料夾設定為
應用程式的情況下
但如果沒有這樣的設定
則根目錄就會跑到遠端的 domain 底下
這對 純前端開發人員來說 其實蠻困擾的
這裡提供兩個方法來解決這個問題
解法1:
修改 assetsPublicPath 參數
例如 (remote) 放在 http://www.abc.com/aa/bb
則 assetsPublicPath 則要設定 "/aa/bb/"
這樣就可以將 img:src 或是 background-image: url 的圖片路徑都統一
像是 "~@/assets/img/..."
解法2:
透過 IIS 設定應用程式
這樣就可以直接使用 assetsPublicPath 的預設值 "/"
但最近才對 vue-cli 中的 webpack-base-conf.js 裡面的 assetsPublicPath 有了解
這個設定其實是根目錄的意思
在預設條件下本機 (localhost) 是以 / 為根目錄
而遠端 (remote) 也是 / 為根目錄
這是在有透過像是 iis
將遠端資料夾設定為
應用程式的情況下
但如果沒有這樣的設定
則根目錄就會跑到遠端的 domain 底下
這對 純前端開發人員來說 其實蠻困擾的
這裡提供兩個方法來解決這個問題
解法1:
修改 assetsPublicPath 參數
例如 (remote) 放在 http://www.abc.com/aa/bb
則 assetsPublicPath 則要設定 "/aa/bb/"
這樣就可以將 img:src 或是 background-image: url 的圖片路徑都統一
像是 "~@/assets/img/..."
解法2:
透過 IIS 設定應用程式
這樣就可以直接使用 assetsPublicPath 的預設值 "/"
留言
張貼留言