【vue開發問題-解決方法】（一）在style中設置background-image時路徑問題

vue工程項目在style中設置background-image時路徑問題

1. 在css外設置background-image時，不能直接使用url，應該使用

<li  :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>

2. 在css中設置background-image時，使用相對路徑在webpack打包后出現問題，圖片路徑到了static下，可在build/util.js

中配置publicPath：“../../”

// (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })

3. webpack對css文件打包時會驗證圖片資源是否獲取成功，若找不到資源文件，就會報錯。同時注釋的資源圖片也會進行檢查。

 

4. 在webpack.base.conf.js中使用別名（resolve.alias）解決scss @import相對路徑問題：

當遇到樣式過多時或者公共樣式，我們會將樣式單獨寫在一個文件夾common.scss;

配置別名：@相當於目錄src

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

 

有兩種引入方式：

在js中：

//原來是這樣寫
import './../src/scss/common.scss';

//定義別名后可以這樣寫
import '@/scss/common.scss';

在scss文件中：注意在這里需要加~在@符號前面

//原本這樣寫
@import './../scss/common.scss';

//現在這樣寫
@import '~@/scss/common.scss';

使用別名不僅簡單方便，同時避免了相對路徑使用時出現的問題，例如在a.scss文件中引入b.scss

//a.scss
@import '@/scss/module/b.scss';

//b.scss
div{
   background-image: url('./../assets/images/1.png');
}

這時再在另外的文件中引入a.scss，則b文件中的圖片資源的相對路徑就會改變，找不到資源圖片報錯。如果使用上面方法則會避免這些錯誤。

注意：如果你的引入的樣式文件格式為scss則，在style標簽上應設置：（css，less等同理，在js中引入沒有這個顧慮）

<style lang="scss" scoped>
    @import '~@/styles/register/main.scss';
</style>

為了避免不必要的錯誤，最好在css中引入css樣式，scss中引入scss樣式，不要混淆。