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 文件。

相关问题

vue组件怎么用public下静态文件

在Vue.js应用中，`public`目录通常用于存放静态资源，如CSS、JavaScript、图片等，它们会被直接暴露在服务器上，无需经过Web服务器处理。如果你需要在Vue组件中引用这些静态文件，你可以按照以下步骤操作：

1. **放置文件**：将静态文件放在`src/public`目录下（在Vue CLI项目中默认如此）。例如，对于一个名为`styles.css`的样式表文件，应该放在`src/public/styles.css`。

2. **使用相对路径**：在Vue组件的模板中，通过`<link>`标签引用样式，或者使用`require`函数引入其他脚本文件，这时使用的是相对路径，如：
- 引入外部CSS：`<link rel="stylesheet" href="./styles.css">`
- 引入JavaScript：`<script src="./scripts.js"></script>`

3. **构建配置**：确保在`vue.config.js`或其他构建配置文件中，已经设置了正确的配置来让Webpack处理`public`目录下的内容。Vue CLI默认配置会自动处理这个部分，你不需要做额外设置。

4. **使用`import`动态导入**：如果你想在运行时动态加载这些文件，可以使用`import()`函数：

   import('./styles.css').then(style => {
     // 在这里注册样式到文档中
   });

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/'
}