Vue组件css背景图片路径错误答案

【问题标题】：Vue components css background-image path errorVue组件css背景图片路径错误
【发布时间】：2017-03-11 16:22:00
【问题描述】：

输出

    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%;

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

【问题讨论】：

我也有类似的问题。当我设置 build:{ assetsPublicPath: './'} 我的 dist css 文件仍然构建为 "url(static/img"
你在使用css-loader插件吗？

标签： vue.js webpack-2 vue-loader

【解决方案1】：

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

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

【讨论】：

我一直在运行具有不同 assetsPublicPath: 值的“npm run build”，由于某种原因，“./”不会在我的 css 中创建 background-image: url(./static/img) 中的相对路径，就像这样......只有url(static/img)
@AkinHwan 可以为您的代码创建一个有此问题的基本模板并将其放在 Github 上供我们播放和修复此问题吗？

【解决方案2】：

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

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

【讨论】：

应该是公认的答案。

【解决方案3】：

设置呢：

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

等等：

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

使用相对路径通常是nightmare。

【讨论】：

【解决方案4】：

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

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

【讨论】：

你在这里混合了一些反应语法...... Vue 会是这样的： :style=" background-image: url(${require('@/assets/bg3.jpg')}) "
这个“要求”对我来说是真正的解决方案，非常感谢。