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

Question

输出

    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? 
        config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    }

碱

  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']
  },

构建后，索引页面正常工作，css背景图像路径就像这样

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

但组件css背景图像路径错误，像这样

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

看起来路径失去了“./”，

Answer 1

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

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

Answer 2

如何设置：

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

所以：

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

一般来说，使用相对路径是nightmare。

Answer 3

:style="{ backgroundImage: 'url(\'' + require('@/assets/bg3.jpg') + '\')' }

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

Answer 4

将background-image保留在template中：

祝你好运...