Ответ 1
Вместо абсолютного пути вы должны указать относительный путь из текущего местоположения файла с помощью webpack в файле.vue, например:
background: url(../../static/img/btn_my.b9186cc.png) no-repeat 50%;
вывод
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, как это
background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;
но ошибка пути исходного изображения компонента css, как это
background: url(static/img/btn_my.b9186cc.png) no-repeat 50%;
Похоже, что путь теряет "./",
Вместо абсолютного пути вы должны указать относительный путь из текущего местоположения файла с помощью webpack в файле.vue, например:
background: url(../../static/img/btn_my.b9186cc.png) no-repeat 50%;
Как насчет настройки:
build: {
...
assetsSubDirectory: '',
assetsPublicPath: '/static/',
...
}
и так:
background: url(/static/img/btn_my.b9186cc.png) no-repeat 50%;
Работа с относительными путями, в общем, является кошмаром.
:style="{ backgroundImage: 'url(\'' + require('@/assets/bg3.jpg') + '\')' }
Это будет лучшее решение для фонового изображения.