Vue composants css erreur de chemin de l'image de fond

Question

sortie

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

base

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

après la construction, les pages d'index fonctionnent normalement, css chemin de l'image de fond comme ceci 

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

mais le composant css background-image path error, comme ceci 

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

On dirait que le chemin perd "./",

Answer 1

Au lieu d'un chemin absolu, vous devez indiquer le chemin relatif à partir de l'emplacement actuel du fichier avec Webpack dans un fichier .vue, comme suit:

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

Answer 2

Qu'en est-il du réglage:

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

et donc:

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

Travailler avec des chemins relatifs est, en général, un cauchemar .

Answer 3

Conservez le background-image dans la template:

 

Bonne chance...