vue组件中，打包后的文件分隔符变成了反斜杠

Question

在 vue 组件中使用了背景图

<style scoped>
#app {
  background: url(../assets/logo.png) 0 center no-repeat;
}
</style>

开发打包后，变成了

#app {
  background: url(static\img\logo.b5bb290.png) 0 center no-repeat;
}

实际应该是 url(static/img/logo.b5bb290.png) 才对

如果是使用 <template> 中插入 <img> 标签则不会有上面的问题

Answer 1

这么写试一试：

<style scoped>
#app {
  background: url('@/assets/logo.png') 0 center no-repeat;
}
</style>

或者加上单引号或者双引号试试，使之成为字符串格式

Answer 2

我建议你还是仔细看一看你的样式是否使用正确，如果是在app.vue中修改样式，那么你的路径引用错误。看你的提供代码，我觉得你是在新定义的模块中使用，我觉得是后者，同时你修改了webpack.base.conf.js 的配置文件，在源文件中用的是url-loader对logo.png文件进行的编译，由于使用了limit文件大小限制，图片会被转成base64,如果将limit改为100，图片见不会被转换成base64,且路径正常显示，你的问题可能是使用了其它loader，如file-loader,但我测试后发现并没有问题，所以可能是你的配置出了问题。

Answer 3

看一下你的 webpack 打包配置文件里设置的路径格式是什么