vue-cli4 背景图片的路径问题

Question

比如我想把项目部署到/vue目录下

vue.config.js里的publicPath是/vue/，assertDir是static

我的一个样式里是这样写的

background-image: url(/vue/static/img/sprite.1.2.4.png)

这样是绝对路径没问题，那如果我想换根目录部署，这个样式里的/vue前缀该怎么动态的改变？（用的是sass）

忘了说了，static是在public下，public和src同级

Answer 1

正常你文件里引入图片就直接按 相对路径引用, 通过webpack打包后他会自动给你补上 vue/static

Answer 2

可以使用 ~@/static/... 也可以在vue.config.js中配置resolve.alias在sass里边直接使用~static就行了。

// vue.config.js
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // ...
  chainWebpack: config => {
    config.resolve.alias
      .set("static", resolve("src/static"))
  },
  // ...

.bg{
    background:url('~static/img/xxxx.jpg')
}