I'm using vite-plugin-singlefile and dynamically URL-encoding the favicon but, ignoring that for now, here's a minimal reproduction:
Create a new Quasar v2 app, using @quasar/app-vite 2.0.0-beta.5 when prompted. (That's the environment I'm using, but I think it happens on any version)
In index.html, delete the included favicons and replace them with an inline one. For example:
Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 20.11.1
Global packages
NPM - 10.2.4
yarn - 1.22.18
@quasar/cli - undefined
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.0.0-beta.5 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.3.0
pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 5.2.8 -- Native-ESM powered web dev build tool
vite-plugin-checker - Not installed
eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
typescript - Not installed
workbox-build - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*
Networking
Host - Myhostname.local
en0 - 192.168.50.171
bridge100 - 192.168.64.1
Relevant log output
Build mode............. spa
Pkg quasar............. v2.15.2
Pkg @quasar/app-vite... v2.0.0-beta.5
Pkg vite............... v5.2.8
Debugging.............. no
Publishing............. no
App • Using quasar.config.js in "esm" format
App • WAIT • Compiling of SPA UI with Vite in progress...
App • DONE • SPA UI compiled with success by Vite • 1825ms
[...]
Build succeeded
Build mode............. spa
Pkg quasar............. v2.15.2
Pkg @quasar/app-vite... v2.0.0-beta.5
Pkg vite............... v5.2.8
Debugging.............. no
Publishing............. no
Browser target......... es2022|firefox115|chrome115|safari14
=======================
Output folder.......... /Users/myhomefolder/repos/quasar-project/dist/spa
Additional context
It's an edge case, I know, but I'm building a web dashboard to be served from an IoT device, so the entire app has to be inlined into a single index.html file :)
What happened?
I have a requirement to minimize network requests, so I need to encode the favicon and include it inline in index.html
The built version of index.html has a
/
character prepended to the inline favicon's data URI, which makes it invalid.If the encoded data URI is very long, you even get an error from Vite:
What did you expect to happen?
Data URIs should be left alone and not transformed by the Vite build. Note that this does not happen with a plain Vite project, or on Vite.new: https://stackblitz.com/edit/vitejs-vite-uimtpr?file=index.html
I believe it is part of Quasar's plugins/configuration.
Reproduction URL
https://stackblitz.com/edit/quasarframework-tteblu?file=index.html
How to reproduce?
I'm using
vite-plugin-singlefile
and dynamically URL-encoding the favicon but, ignoring that for now, here's a minimal reproduction:Create a new Quasar v2 app, using
@quasar/app-vite
2.0.0-beta.5 when prompted. (That's the environment I'm using, but I think it happens on any version)In index.html, delete the included favicons and replace them with an inline one. For example:
/
character.Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)
Platforms/Browsers
Firefox, Chrome
Quasar info output
Relevant log output
Additional context
It's an edge case, I know, but I'm building a web dashboard to be served from an IoT device, so the entire app has to be inlined into a single index.html file :)