在vue项目中使用静态资源

在Vue项目中，可以使用静态资源（如图片、音频、视频等）。

首先，将静态资源放到项目中的`public`目录下，例如`public/img/logo.png`。

然后，在Vue组件中使用静态资源，可以使用以下方式：

1. 直接使用相对路径：

<template>
  <img src="../public/img/logo.png" alt="Logo">
</template>

2. 使用require方法：

<template>
  <img :src="require('@/assets/logo.png')" alt="Logo">
</template>

其中，`@`代表`src`目录，`require`方法会将资源转换为一个模块，可以在组件中使用。

需要注意的是，在使用相对路径时，需要注意路径的正确性；而使用`require`方法时，需要在`vue.config.js`中配置`esModule`为`false`，以避免出现错误。具体配置方式如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('images')
      .use('url-loader')
      .tap(options => {
        options.esModule = false
        return options
      })
  }
}

这样，在Vue组件中就可以使用静态资源了。