您会注意到在项目结构中我们有两个资源目录：/public/和/src/assets/。他们有什么区别？一些是静态资源，而另一些则由构建系统进行处理和嵌入。
所以我们试着回答上面的问题。我们首先谈谈使用常规资源，然后我们将看到相对于静态资源的区别。
常规资源 - /src/assets
在*.vue组件中，所有模板和CSS都由vue-html-loader和css-loader解析以查找资源URL。例如，在<img src="./logo.png">和background：url（./logo.png）中，"./logo.png"是一个相对的资源路径，并且会被Vite作为模块依赖进行处理。
由于这些资源可能在构建过程中被内嵌/复制/重命名，因此它们基本上是源代码的一部分。这就是为什么建议将Vite处理过的资源放在/src/assets中，与其他源文件一起。实际上，你甚至不需要把它们都放在/src/assets中：你可以根据模块/组件使用它们来组织它们。例如，您可以将每个组件放在其自己的目录中，其静态资源就位于其旁边。
资源处理规则
相对URL，例如./assets/logo.png将被解释为模块依赖项。它们将被替换为基于您的Vite输出配置自动生成的URL。
以~为前缀的URL被视为模块请求，类似于import 'some-module/image.png'。如果你想利用Vite的模块解析配置，你需要使用这个前缀。 Quasar提供assets的开箱即用的Vite别名，因此建议您像这样使用它：<img src="~assets/logo.png">。注意‘assets’前面的’~'。
静态资源 - /public
根相对URL（例如/logo.png – 其中“/”指的是publicPath）或logo.png根本不处理。这些资源应该放在public/中。它们将不会处理。public文件夹内容将按原样简单复制到可分发文件夹。
常规资源 vs 静态资源
“assets”文件夹中的文件仅包含在您的构建中，如果它们在其中一个Vue文件中具有文字引用。 无论如何，“public”文件夹中的每个文件和文件夹都会按原样复制到生产版本中。
WARNING
如果没有构建SPA/PWA/SSR，那么/public/icons/*和/public/favicon.ico将不会嵌入到您的应用中，因为它们不会用于任何目的。 例如，Electron或Cordova应用程序不需要这些文件。
更多Vite信息
请在[这里]（https://vitejs.dev/guide/assets.html）阅读Vite的指南