静态资源

有些内容不需要经过 webpack 模块化处理,则可以将这些内容放在 public 文件夹,构建后会直接复制到 dist 目录,所以你需要通过BASE_URL来引入它们。

在HTML模板中使用

public/index.html 中需要设置:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
1

在.vue 和 js 文件中使用

<template>
  <img :src="`${publicPath}my-image.png`">
</template>
<script>
export default {
  setup() {
    return {
      publicPath: process.env.BASE_URL
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12