vue打包后背景图不显示

最新推荐文章于 2025-06-18 11:24:19 发布

原创最新推荐文章于 2025-06-18 11:24:19 发布 · 809 阅读

3 ·

CC 4.0 BY-SA版权

前端开发经验总结录同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文介绍了一种解决服务器上登录页面背景图片丢失的问题的方法。通过在utils.js中添加publicPath参数，成功使登录界面在服务器环境下显示完整背景。

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

这两天做了一个项目，在做好登录之后进行打包放到服务器上，在本地跑的时候一切正常，但是在服务器上跑的时候发现登录页面的背景图没有了，是一片空白，为此找到了一下解决方案

在build 下的 utils.js中找到：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

并添加 publicPath: '../../'

添加后的效果：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

解决之前我的登录界面是这样的：