vue2 使用public下静态资源的方式

在 Vue2 中，可以使用 `public` 目录下的静态资源。这些资源可以通过相对路径来引用。

以下是在 Vue2 中使用 `public` 目录下的静态资源的步骤：

1. 将静态资源文件放在 `public` 目录下。例如，将图片文件放在 `public/img` 目录下。

2. 在 Vue 组件中使用相对路径引用静态资源文件。例如，如果要在组件中引用 `public/img/logo.png`，可以这样写：

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

这里的 `./` 表示相对路径，指的是组件所在的目录。

3. 在打包时，静态资源文件会被直接复制到输出目录中，因此可以直接通过相对路径引用它们。

注意事项：

- 如果静态资源文件的路径中包含空格或特殊字符，需要使用 URL 编码。
- 如果要在 `public` 目录下放置一些需要经过构建的文件（如 Less、Sass 或 TypeScript 文件），则需要在 `vue.config.js` 中配置相应的构建规则，以便打包时将它们编译成 CSS 或 JavaScript 文件。

相关问题

vue2工程如何指定静态资源路径

在Vue2中，可以通过配置webpack来指定静态资源路径。具体步骤如下：

1. 打开`config/index.js`文件，找到`build`对象。

2. 在`build`对象中，找到`assetsPublicPath`属性，并设置为你想要的静态资源路径，例如`assetsPublicPath: '/my-static/'`。

3. 保存文件，并重新运行`npm run build`命令来生成新的静态资源路径。

注意：如果你使用的是Vue CLI 3，那么在`vue.config.js`文件中可以通过设置`publicPath`来指定静态资源路径。例如：

module.exports = {
  publicPath: '/my-static/'
}

在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组件中就可以使用静态资源了。