1. 程式人生 > >Vue-cli 構建項目 的`.vue`組件中, scss中添加背景圖路徑問題

Vue-cli 構建項目 的`.vue`組件中, scss中添加背景圖路徑問題

絕對路徑 target ash vue png stack span urn 路徑問題

技術分享圖片

【解決方法】:

更改build/utils.js文件中的 ExtractTextPlugin 的 options配置.

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: ‘../../‘, //註意: 此處根據路徑, 自動更改
    fallback: ‘vue-style-loader‘
  })
} else {
  return [‘vue-style-loader‘].concat(loaders)
}
  }

這樣配置以後,在scss文件裏面,引入路徑為 background-image: url(../img/brokers.jpg);

.vue文件裏面,按照常的絕對路徑引入就好,<img src="../img/icon-wht-cash-stack.png" />

技術分享圖片

參考文章:https://www.cnblogs.com/zhangrunhao/p/7114989.html

Vue-cli 構建項目 的`.vue`組件中, scss中添加背景圖路徑問題