VUE中处理资源路径

最新推荐文章于 2024-08-20 12:09:08 发布

喵_美

最新推荐文章于 2024-08-20 12:09:08 发布

阅读量1.8k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_34708564/article/details/115007000

版权

在 Vue 应用中，处理资源路径分为相对路径、绝对路径以及使用 `public` 文件夹的情况。相对路径的资源会被 webpack 处理，而公共文件夹中的资源则不受处理，适合存放静态资产。使用 `public` 文件夹可以避免特定场景下的文件处理问题，例如需要固定文件名或大量动态引用。配置 `publicPath` 和在 HTML 中设置链接前缀是解决部署在非根目录时静态资源路径问题的关键。

摘要由CSDN通过智能技术生成

处理资源路径

相对路径：当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将被webpack处理。
```
<img alt="Vue logo" src="./assets/logo.png">
```

绝对路径:如果 URL 是一个绝对路径，它会去当前服务器的静态路径(public)下去找，public文件webpack不会做任何处理，用来放静态资源
在这里插入图片描述

<img alt="Vue logo" src="/assets/logo.png"> //相当于localhost:8080/assets/logo.png ，去public中找assets文件
<img alt="Vue logo" src="http://image.xx.com/logo.png">

如果 URL 以 ~ 开头会作为一个模块请求被解析从node_modules中引用资源。
```
<img src="~some-npm-package/foo.png">
```
如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @ 。
```
import Hello from '@/component
```