【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中引入没有这个顾虑)


为了避免不必要的错误,最好在css中引入css样式,scss中引入scss样式,不要混淆。

转载于:https://www.cnblogs.com/qiuyueding/p/8953396.html

你可能感兴趣的:(【vue开发问题-解决方法】(一)在style中设置background-image时路径问题)