• Vite静态资源方法这个坑差点让我加班到凌晨*

作为一名前端开发者。我自认为对现代建立工具已经相当熟悉，特别是Vite——这个由Vue.js作者尤雨溪开发的下一代前端工具，以其极速的热更新和建立性能赢得了广泛好评。只是最近在项目中遇到的一个关于静态资源方法的问题，却让我险些加班到凌晨。这个问题的隐蔽性和Vite的某些默认行为让我意识到。即使是看似简单的工具，也可能隐藏着令人头疼的细节。

说到背景。Vite的静态资源处理

Vite在开发模式下使用原生ES模块加载资源，而在生产模式下则通过Rollup进行打包。这种设计使得开发时的体验极其流畅。但也带来了一些与传统建立工具不同的行为，特别是在静态资源方法的处理上。

Vite官方文档对静态资源的处理有明确的说明：

• 在JavaScript中通过import引入的资源会被解析为URL。
• 在CSS中通过url引用的资源也会被正确处理。
• 在HTML中直接引用的资源则主要注意方法问题。

只是正是这些“需要注意”的地方，成为了我踩坑的起点。说起来，

问题现象

项目的目录结构如下：

project/
├── public/
│ ├── favicon.ico
│ └── images/
│ └── logo.png
├── src/
│ ├── assets/
│ │ └── header.png
│ ├── components/
│ │ └── Header.vue
│ └── App.vue
└── vite.config.js

一切运行正常。只是当我运行vite build建立生产版本后部署到服务器上时部分图片资源加载失败。再看主要表现为，

1. /public/images/logo.png可以正常加载。不过，
2. /src/assets/header.png加载失败。返回404错误，

问题分析

. 静态资源的两种引用方式

Vite中静态资源有两种常见的引用方式：

• /放在/public/目录下/strong>:这类资源会被直接复制到建立输出根目录,引用时需使用绝对方法。

. 方法问题根源