vue 添加 背景 （less解决） background-image: url('./assets/images/filename-bg.png') 如果放在public下的图片，要在index.html 引入 common.css 单独在这里写图片背景

vue 添加 背景 background-image: url('./assets/images/filename-bg.png') 如果放在public下的图片，要在index.html 引入 common.css 单独在这里写图片背景

因为直接在index.html 引入css 是不走webpack打包编译，路径就不会被转义。

如果直接在vue文件里面写， 写成绝对跟目录，文件会找不到。直接加二级目录，哪里都是硬代码。不喜欢。写成相对路径，会认为是项目的当前vue文件的相对目录文件，会报文件找不到。如果写 ~@ 是指项目的src目录，也不是public目录。

所以最终的解决方案就是 public下建立commmon.css

当然，写个webpack loader也行，但是感觉很麻烦。这么多项目，一个一个的加，工程量太大。以后看看有没有大神已经写过了，直接安装一下就好了。

less 解决

添加less变量可以解决。
方式一 添加个less全局变量的插件，注入全局变量。
由于现有项目不方便安装新包，所以这个方案 新项目再说。
方式二:

src/global.var.less
@base-url: "/your-project"

oas-title.vue
<style lang="less" scoped>
@import "~@/global.var.less";

.oas-container {
  background-image:url("@{base-url}/assets/images/overall-title-bg.png"
}

这个方案是强制 使用 http在线，不能本地。用加载css那个是可以本地不起服务的。

用less这个，代码都在一起，方便查代码。不好的地方是 都要引入一下全局文件，或者新装个插件。