How Can Vite Watch for Changes in Static Files Such as Images?

[hengwuming]

I'm find an issue with file watching for static assets (like images) while developing with Vite in a Vue.js application. Here's my project structure:

src
├── assets
│   └── images
├── apps
│   └── index.vue
└── ...
vite.config.ts
...other files or folders

In index.vue, I reference an image as follows:

<template>
  <div class="">
    <img src="@/assets/images/1.jpg" alt="" />
  </div>
</template>

If the image 1.jpg exists in the assets/images folder before I start the development server, Vite can find and load it without any issues. However, if I add a new image to the assets/images folder after starting the development server, Vite warns that it cannot find the newly added image.

I modified the root option in vite.config.ts to set the project root to root: 'src/apps/${projectName}'. Could this change be causing the issue where newly added images are not recognized by Vite until the development server is restarted?