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-image path like this

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

但是组件css background-image路径错误，像这样

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

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

原文由 Wang.Shayne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当我尝试在 Vue 3 的组件中使用样式时，我也遇到了这个问题。我使用以下语法解决了它。

 background-image: url('~@/assets/image.png');

原文由 Usama Imdad 发布，翻译遵循 CC BY-SA 4.0 许可协议