您将在项目结构中注意到我们有两个用于资产的目录：/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 别名，因此建议您像这样使用它：<img src="~assets/logo.png">。注意 ‘assets’ 前面的 ~。
静态资产 - /public
根相对 URL（例如 /logo.png - 其中 ‘/’ 是您的 publicPath）或 logo.png 根本不会被处理。这应该放在 public/ 中。这些将不会被处理。public 文件夹的内容将按原样复制到可分发文件夹中。
资产与静态
“assets” 文件夹中的文件只有在您的 Vue 文件中存在文字引用时才会包含在您的构建中。来自 “public” 文件夹的每个文件和文件夹都将按原样复制到您的生产构建中，无论如何。
警告
当不构建 SPA/PWA/SSR 时，/public/icons/* 和 /public/favicon.ico 不会嵌入到您的应用程序中，因为它们没有任何用处。例如，Electron 或 Cordova 应用程序不需要这些文件。
Vite 的更多信息
请阅读 Vite 的指南 这里.