Vue.js
Vue插件发布后遇到css背景图片无法显示的问题。（已解决）
发布于 3 年前 作者 feer 1754 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

大家好，

我最近才开始学习vue，想写点东西练手，所以就用了webpack-simple结构写了一个treeview的插件。
在这个treeview中，文件夹的图标是一个 i 标签，用css background-image放进去背景的一张图片。
预想的效果应该如下图所示：
image
但是，打包发布到npm，在下载使用，css 的背景图片却没有显示出来，变成了这样的效果。
大家可以看到，文件夹的图标没有显示出来。

console错误信息：

项目目录：
image
打包前，css background-image 的路径：

.flie-sm{
    background-image: url('../../assets/image/icon/flie_18px.png')
}

打包后的项目：
image
打包后，css background-image 的路径：

webpack.config.js配置：

module.exports = {
  entry: './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'iceUI.js',
    library: 'vue-ice-ui',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  ...
}

我找了很多资料，也没有找到合适的解决方法，原因我大概明白是因为打包时，会把路径：

background-image: url('../../assets/image/icon/flie_18px.png');

替换成：

background-image: url('/dist/flie_18px.png');

然后使用这个插件的项目里面却没有这个路径，就导致了图片显示不出来。

这个问题困了我两三天了，
请各位大神教教小弟该如何解决这个问题。:pray:

（PS：我用的是webpack-simple，因为只是一个小插件，就用了简易的。）

回到顶部