Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Defining a static public path with Vite (renderBuiltUrl) doesn't work with async routes #6411

Open
davidkron opened this issue Aug 5, 2022 · 1 comment

Comments

@davidkron
Copy link

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.

@edison1105
Copy link
Member

The issue can no longer be reproduced using the latest version of Vue and vite.
see https://stackblitz.com/edit/vuejs-public-path-ztfctd-dbmx3k?file=package.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants