使用Vue CLI 3.7.0创建了一个项目并安装了bootstrap-vue 2.0.0-rc.19。 Vue CLI scaffolded项目使用Webpack,它使用文件加载器。
在本地运行服务器时,<img src='../assets/images/test.jpg'>
被<img src='/img/test.4d111941.jpg'>
取代。
使用BootstrapVue指令,<b-carousel-slide img-src='../assets/images/test.jpg'>
不会导致缓存被破坏的URL。
有人碰到这个吗?想知道我是否必须覆盖vue.config.js中的一些Webpack行为。
需要将其添加到vue.config.js:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options['transformAssetUrls'] = {
img: 'src',
image: 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
})
}
}