如何在Vue应用中使用public目录图片，实现Vue与JS路径统一？

原理说明 #

src/assets目录下的资源会被Webpack打包处理，文件名会添加哈希值，动态通过JavaScript修改路径时，相对路径无法匹配处理后的文件。而public目录下的资源会被直接复制到构建后的dist根目录，不会被修改，因此可以用统一的绝对路径访问。

实现步骤 #

1. 存放图片到public目录 #

在项目根目录的public文件夹内创建img子目录，将需要的图片（比如bg_b.png、bg_w.png）放入其中。

2. 静态代码（模板/样式）中的路径写法 #

不管是在Vue组件的<style>标签里，还是模板的<img>标签中，直接使用根路径格式：

/* 样式中使用 */
.background-element {
  background-image: url('/img/bg_b.png');
}

<!-- 模板中使用 -->
<img src="/img/bg_b.png" alt="背景图">

3. JavaScript动态修改路径的写法 #

动态修改时同样使用根路径格式，示例如下：

// 原生JS方式修改
document.getElementById('target').style.backgroundImage = "url('/img/bg_w.png')";

// Vue组件内绑定修改
export default {
  data() {
    return {
      currentBg: '/img/bg_b.png'
    }
  },
  methods: {
    switchBackground() {
      this.currentBg = '/img/bg_w.png';
    }
  }
}

模板中绑定：

<div :style="{ backgroundImage: `url(${currentBg})` }"></div>

4. 部署子路径的适配 #

如果项目部署在域名的子路径下（比如https://your-domain.com/vue-project/），需要在vue.config.js中配置publicPath：

module.exports = {
  publicPath: '/vue-project/'
}

配置后，所有/img/xxx.png的路径会自动替换为/vue-project/img/xxx.png，无需手动修改代码中的路径。

内容的提问来源于stack exchange，提问作者Janez Kranjski