# [Vite] 处理静态资源路径

## 静态资源路径的种类

从路径的格式上来说，`vite` 的静态资源路径有两种：**相对路径** 和 **绝对路径**

从路径的类型上来说，`vite` 的静态资源路径有两种：**基于 http URL 的** 和 **基于文件系统的**

### 相对路径

在 `vite` 文档的表述中，相对路径常用于在 “嵌入式” 的页面中使用：

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1759377908721/bb4da06d-1f22-41d8-8f05-516107de9f7c.png align="center")

这里的 “嵌入式” 指的是例如浏览器插件这种，将一个页面嵌入到一个网页中的形式

### 绝对路径

绝对路径指的是 “以根路径为起点” 而表示的路径

绝对路径在 “基于 http URL” 和 “基于文件系统” 的情况下，最终表现的形式也不同，例如：

* http url 为 `https://example.com` ，绝对路径为 `/assets`，那么最终的 url 为 `https://example.com/assets`
    
* 在文件系统的路径中，`/assets` 的路径在 `macos` 和 `linux` 系统中，表现为 `/assets`；在 `windows` 系统中则会出现报错
    
* 另外，直接使用完整的 http url 也是一种绝对路径：`https://another.com`
    

## 在 Vite 中处理静态资源路径的建议

遵循以下方式去处理静态资源路径，能够让代码组织得更合理

### 将资源存放至 CDN

这是非常普遍的处理方式，存放至 CDN 后，直接使用完整的绝对 http url 路径引入资源；这样就不需要把文件存放到当前的服务器下（本地）

### 将资源存放到本地

这种做法就是将相关资源一并打包到最终的产物中

`vite` 会处理设定好的的静态资源目录，在打包时，同时将其放到输出目录中：

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1759378898152/3100d6ca-c4b8-4cb0-b21e-486f9f0d94a9.png align="center")

此时的静态资源路径就是绝对路径了，在部署之后，就会根据你的网站的 http url 来找到对应的路径

### 对于嵌入式的页面，使用相对路径

像浏览器插件这种 “嵌入式” 页面，其文件查找策略是基于文件系统的，所以再使用绝对路径的话就会从根路径开始查找，基本上会出现错误；所以必须使用相对路径来进行文件的引用

由于 `vite` 默认是以服务器网页的的形式打包产物的 -- 也就是绝对路径，所以要改为相对路径时，需要修改 `vite` 的 `base` 配置项

## 涉及到的 Vite 配置项

总的可以参考：[https://cn.vite.dev/guide/build.html#public-base-path](https://cn.vite.dev/guide/build.html#public-base-path)

* `base`：[https://cn.vite.dev/config/shared-options#base](https://cn.vite.dev/config/shared-options#base)
    
* `publicDir`：[https://cn.vite.dev/guide/assets.html#the-public-directory](https://cn.vite.dev/guide/assets.html#the-public-directory)