Vue 组件 css background-image 路径错误 [英] Vue components css background-image path error

问题描述

输出

    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背景图片路径如下

after build,the index pages work normal, css background-image path like this

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

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

but the component css background-image path error, like this

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

看起来路径丢失了./"，

It's look like the path lose "./",

推荐答案

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

Instead of absolute path, You should give the relative path from the current file location with webpack in .vue file, something like:

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

这篇关于Vue 组件 css background-image 路径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！