Vue.js Vue组件css背景图像路径错误

输出

基地

构建之后，索引页面工作正常，css背景图像路径如下

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },

background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;

但是组件css背景图像路径错误，如下所示

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },

background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;

---

看起来路径丢失了“/”，

而不是绝对路径，您应该使用.vue文件中的webpack给出当前文件位置的相对路径，类似于：

background: url(static/img/btn_my.b9186cc.png) no-repeat 50%;

设置如何：

background: url(../../static/img/btn_my.b9186cc.png) no-repeat 50%;

因此：

build: {
  ...
  assetsSubDirectory: '',
  assetsPublicPath: '/static/',
  ...
}

在一般情况下，使用相对路径是非常困难的

---

这将是背景图像的最佳解决方案。

我也有类似问题。当我设置build:{AssetPublicPath:'./'}时，我的dist css文件仍然build为“url（static/img）”您是否正在使用

css加载程序
插件？我一直在使用不同的AssetPublicPath:值运行“npm run build”，出于某种原因，“/”不会在我的css中创建
背景图像中的相对路径：url（./static/img）
像这样…只有
url（static/img）
@AkinHwan有可能创建一个存在此问题的代码的基本模板，并将其放在Github上让我们播放和修复？您在这里混合了一些react语法…Vue类似于：：style=“
背景图像：url（${require（'@/assets/bg3.jpg'））}
”
:style="{ backgroundImage: 'url(\'' + require('@/assets/bg3.jpg') + '\')' }