vue-cli 3.x版本 打包后背景图路径失效的问题

Question

使用的vue-cli 3，打包后，背景图片路径依旧失效，心累，难道要回滚回vue-cli 2

Answer 1

怎么解决的？

Answer 2

你可以先把背景图片上传到服务器，然后在 vue里用绝对地址，就是图片资源网址，就不会出现失效了。

Answer 3

小图片考虑直接转base64打包进代码。大图的话你看下配置。

加个.

Answer 4

不知道楼主解决了没~

看官方文档中，好像要在vue.config.js 配置覆盖(不确定)

我用了一个很傻的方法，直接将img文件夹复制到css中了

Answer 5

  chainWebpack: config => {
    config.resolve.alias
      .set('assets', resolve('src/assets'))
      .set('@', resolve('src'))
    config.output.filename('[name].js?[hash]').end()
  }
// 对应的.vue文件中
background: url('~assets/images/right-glay.png')

~会把assets当成模块解析，打包之后路径就不会错了