一、相对路径的基本概念

相对路径是指相对于当前文件的位置来指定资源的路径。在Vue项目中，通常有以下几种相对路径的写法：

  • 基于public文件夹的路径：所有放置在public文件夹中的资源都会被直接复制到构建后的dist文件夹中，因此可以直接使用相对路径访问。
  • 基于src文件夹的路径：所有放置在src文件夹中的资源都会被处理并包含在构建后的文件中，因此可以使用相对于src文件夹的路径来访问。

二、使用相对路径访问静态资源

以下是如何在Vue组件中使用相对路径访问静态资源的方法：

1. 基于public文件夹的路径

在模板中使用：

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

在JavaScript中使用：

const imagePath = '/public/img/logo.png';

2. 基于src文件夹的路径

在模板中使用：

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

在JavaScript中使用：

const imagePath = './assets/img/logo.png';

三、使用环境变量获取public路径

Vue CLI提供了环境变量机制，可以在.env文件中定义变量。例如，可以在.env文件中设置VUE_APP_PUBLIC_PATH变量：

VUE_APP_PUBLIC_PATH=/public/

然后在代码中使用：

const publicPath = process.env.VUE_APP_PUBLIC_PATH;
const imagePath = `${publicPath}img/logo.png`;

这种方法可以在不同环境中灵活地获取public路径。

四、总结

掌握Vue中相对路径的使用技巧对于开发者来说非常重要。通过本文的介绍，相信你已经能够轻松地在Vue项目中使用相对路径来访问静态资源。在实际开发中，灵活运用这些技巧可以让你更加高效地管理和配置项目资源。