Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vuejs-public-path-ztfctd?file=vite.config.js

Steps to reproduce

• start the demo application (should happend automatically on stackblitz)
• Vue demo application (generated through npm init vue@latest) should be visible
• click on the "About" link, which should route to a different component

What is expected?

The route change to "About" should happend without error.

What is actually happening?

First click on "About" doesn't change the component, but results in the following error inside the console: GET https://vuejs-public-path-ztfctd--3000.local.webcontainer.io/assets/AboutView.6cbe03f2.js net::ERR_ABORTED 404 (Not Found)

System Info

From Stackblitz:

  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    vue: ^3.2.37 => 3.2.37

Any additional comments?

We want to integrate a Vue application into an existing legacy application, which is not hosted at the root and therefore some flexibility is needed to configure such a use-case. Also the static assets might be served from a different path (framework requirement, CMS, CDN, ...)

We discovered the following option in Vite, which looked very promising for our use-case: https://vitejs.dev/guide/build.html#advanced-base-options (see vite.config.js on Stackblitz)

At first glance this did work like we imagined, but it doesn't seem to work with async routes (like the about page in the Vue init application). The first click always results in a 404 error, as it looks like the renderBuiltUrl hook is not executed for the async import and therefore the asset will be loaded from the root.

Our first guess was that it is a problem with Vite, so we tried to reproduce it with a plain build without Vue, but we didn't manage to do so.