你会注意到在项目结构中我们有两个资源目录：/public/ 和 /src/assets/。它们之间有什么区别？有些是静态资源，而其他则由构建系统处理和嵌入。
¥You will notice in the project structure we have two directories for assets: /public/ and /src/assets/. What is the difference between them? Some are static assets while the others are processed and embedded by the build system.
让我们尝试回答上面的问题。我们将首先讨论如何使用常规资源，然后了解静态资源的区别。
¥So let’s try to answer the question above. We’ll first talk about using regular assets then we’ll see what the difference is for static assets.
常规资源 - /src/assets(Regular assets - /src/assets)
¥Regular assets - /src/assets
在 *.vue 组件中，所有模板和 CSS 都会由 Vite 解析以查找资源 URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，"./logo.png" 是一个相对资源路径，Vite 会将其解析为模块依赖。
¥In *.vue components, all your templates and CSS are parsed by Vite to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Vite as a module dependency.
由于这些资源在构建期间可能会被内联/复制/重命名，因此它们本质上是源代码的一部分。这就是为什么建议将 Vite 处理的资源与其他源文件一起放置在 /src/assets 中。实际上，你甚至不必将它们全部放在 /src/assets 中：你可以根据使用它们的模块/组件来组织它们。例如，你可以将每个组件放在其自己的目录中，并将其静态资源放在其旁边。
¥Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Vite-processed assets inside /src/assets, along side other source files. In fact, you don’t even have to put them all in /src/assets: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
资源解析规则(Asset Resolving Rules)
¥Asset Resolving Rules
相对 URL，例如 ./assets/logo.png，将被解释为模块依赖。它们将被替换为基于 Vite 输出配置自动生成的 URL。
¥Relative URLs, e.g. ./assets/logo.png will be interpreted as a module dependency. They will be replaced with an auto-generated URL based on your Vite output configuration.
以 ~ 为前缀的 URL 被视为模块请求，类似于 import 'some-module/image.png'。如果你想利用 Vite 的模块解析配置，则需要使用此前缀。Quasar 提供了开箱即用的 assets 别名，因此建议你按如下方式使用它：<img src="~assets/logo.png">。请注意 ~ 位于 ‘assets’ 之前。
¥URLs prefixed with ~ are treated as a module request, similar to import 'some-module/image.png'. You need to use this prefix if you want to leverage Vite’s module resolving configurations. Quasar provides the assets alias out of the box, so it is recommended that you use it like this: <img src="~assets/logo.png">. Notice ~ in front of ‘assets’.
静态资源 - /public(Static Assets - /public)
¥Static Assets - /public
根目录相关的 URL（例如 /logo.png，其中 ‘/’ 是你的 publicPath）或 logo.png 根本不会处理。这应该放在 public/ 中。这些 props 根本不会被处理。public 文件夹的内容将直接复制到可分发文件夹。
¥Root-relative URLs (e.g. /logo.png – where ‘/’ is your publicPath) or logo.png are not processed at all. This should be placed in public/. These won’t be processed at all. The content of the public folder is simply copied over to the distributable folder as-is.
资源 vs 静态资源
只有当 “assets” 文件夹中的文件在你的某个 Vue 文件中字面量引用时，它们才会包含在你的构建中。无论如何，“public” 文件夹中的每个文件和文件夹都会按原样复制到你的生产版本中。
¥Files in the “assets” folder are only included in your build if they have a literal reference in one of your Vue files. Every file and folder from the “public” folder are copied into your production build as-is, no matter what.
危险
如果未构建 SPA/PWA/SSR，则 /public/icons/* 和 /public/favicon.ico 将不会嵌入到你的应用中，因为它们没有任何用途。例如，Electron 或 Cordova 应用不需要这些文件。
¥When not building a SPA/PWA/SSR, then /public/icons/* and /public/favicon.ico will NOT be embedded into your app because they would not serve any purpose. For example, Electron or Cordova apps do not require those files.
更多 Vite 信息(More info with Vite)
¥More info with Vite
请阅读 Vite 指南 此处。
¥Please read Vite’s guide here.