Quasar Framework and Web Server: SPA Asset Resolution in Non-Root Subdirectories

Direct Answer

Set build.publicPath and router.base to the same subdirectory path with a trailing slash in quasar.config.js. For a deployment at /app-name/:

// quasar.config.js
module.exports = function (/* ctx */) {
  return {
    build: {
      publicPath: '/app-name/'
    },
    router: {
      base: '/app-name/'
    }
  }
}

This synchronizes webpack's asset emission with Vue Router's navigation base, ensuring all static assets (JS, CSS, lazy chunks) resolve correctly on any route depth.

Confirmed Facts

• publicPath controls webpack output: When set to /app-name/, every <script src= and <link href= in the generated index.html becomes an absolute URL starting with that prefix.
• router.base controls Vue Router: The router resolves navigation relative to this base. History mode requires the server to rewrite all requests under /app-name/ to index.html.
• Trailing slash is mandatory: /app-name (no slash) produces malformed asset URLs like /app-namejs/app.js.

Likely Explanation: Absolute vs Relative Paths

An absolute publicPath (/app-name/) emits asset URLs that are stable regardless of the current route depth. A request to /app-name/a/b still loads /app-name/js/app.js because the browser resolves absolute paths from the domain root.

A relative publicPath (./) would emit paths relative to the current document. On /app-name/ this works, but on a nested route like /app-name/a/b the browser requests /app-name/a/b/js/app.js — a 404. This is why absolute publicPath is the recommended pattern for subdirectory SPA hosting.

Steps for This Deployment

1. Update quasar.config.js with matching build.publicPath and router.base as shown above.
2. Run quasar build (or quasar build -m spa).
3. Inspect dist/spa/index.html — verify <script src="/app-name/js/... and <link href="/app-name/css/....
4. Deploy the dist/spa contents to your web server under the app-name directory.
5. Configure the web server (nginx, Apache, Caddy, etc.) to rewrite all requests under /app-name/ to /app-name/index.html for history mode.
6. Test: load /app-name/, navigate to a nested route, refresh the page — no 404s on assets or routes.

One Missing Diagnostic Detail

Which Quasar major version are you using? Quasar v1 uses top-level build.publicPath and router.base. Quasar v2 (with Vite) uses the same keys but inside the configure wrapper and may also accept vite.base as an alias. The configuration shape differs slightly; confirming the version avoids applying the wrong syntax.