Quasar CLI with Vite - @quasar/app-vite
应用处理资源

您会注意到在项目结构中我们有两个资源目录:/public//src/assets/。他们有什么区别?一些是静态资源,而另一些则由构建系统进行处理和嵌入。

所以我们试着回答上面的问题。我们首先谈谈使用常规资源,然后我们将看到相对于静态资源的区别。

常规资源 - /src/assets

*.vue组件中,所有模板和CSS都由vue-html-loadercss-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的指南