vue工程项目在style中设置background-image时路径问题

最新推荐文章于 2024-02-04 02:17:06 发布

郭宝

最新推荐文章于 2024-02-04 02:17:06 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/90771423

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了在Vue工程中处理background-image路径问题的方法，包括在CSS外部和内部设置背景图的注意事项。当使用相对路径在Webpack打包后可能出现问题，可以修改`build/util.js`中`publicPath`配置。Webpack会验证CSS中的图片资源，若找不到会报错。为解决scss的@import相对路径问题，可使用Webpack的别名配置。在`webpack.base.conf.js`中设置`resolve.alias`，使`@`代表`src`目录。通过别名引用样式文件可以避免相对路径导致的资源找不到错误。建议按规则在CSS中引入CSS样式，SCSS中引入SCSS样式，以减少错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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