base option not support fully url at dev mode

[Yiniau]

Describe the bug

from #833, the last comment.

In my case, use base like this:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: function(tag) {
                        return tag.includes("fl-") || tag.includes("sl-");
                    }
                }
            }
        })
    ],
    base: "http://localhost:3003/",
    root: "/Users/zhouyiming/Project/frameless-pc/src/pages/demo1"
});

But when i visit the http://localhost:3003/, the assets is not be rewrited

if this page is nested in a "main" page, this request will be 404

Reproduction

https://stackblitz.com/edit/vitejs-vite-ofxh2y?file=vite.config.js&terminal=dev

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 97.41 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /opt/homebrew/bin/node
    npm: 8.6.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Safari: 15.4
  npmPackages:
    vite: ^2.9.9 => 2.9.9

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Yiniau]

https://github.com/vitejs/vite/blob/main/packages/vite/src/node/config.ts#L600

in document, the base option should accept full url

https://vitejs.dev/config/#base

[bluwy]

The full URL is supported in prod only (which can probably be better documented). Absolute urls in dev doesn't make sense as you're already serving the files via the url the vite dev server is on, e.g. localhost:3000.

I'm assuming you want to serve "assets" only via a different host, maybe #8450 fits your needs?

[Yiniau]

you're already serving the files via the url the vite dev server is on, e.g. localhost:3000.

actually, there are two servers is running,

1. the main server run in port 10000
2. the page server run in port 3000

that look like Single-SPA, if developer visit 3000, all be fine. but some assets will be 404 when they visit 10000.

if the url not change, any other config just helpless.

[patak-dev]

One of the reasons that #8450 adds the options at build is to allow to do the same in the future for dev.advancedDevOptions. But the path there may be a bit long, and it is unclear to me at this point if the flexibility justifies the complexity at dev time. @Yiniau did you check https://vitejs.dev/config/#server-origin, this is what some backend integrations are using right now

[Yiniau]

@patak-dev no help for me.

#8430 or #7644 add relative base, but what i need is full url absolute base...

[Yiniau]

@patak-dev dose enable full url public path while developing make any hidden trouble?

[sapphi-red]

• the main server run in port 10000
• the page server run in port 3000

@Yiniau How is this set up? Are you using iframes? Is there a server in front of Vite?

[Yiniau]

• the main server run in port 10000
• the page server run in port 3000

@Yiniau How is this set up? Are you using iframes? Is there a server in front of Vite?

basicly, that's a new way to provide micro-frontends with a light runtime dep, you can checkout https://native-spa-route.vercel.app/custom-render/react/17/with-css to get simple demo.

the 10000 is a complete service, 3000 is a complete service too.

They are related by agreement, 3000 output page content, 10000 output application framework content.

The pseudo-code:

// 10000 main.html
// all in html
<app>
  <header/>
  <side-menu/>
  <page-1 render-js-function-source="http://localhost:3001/src/main.ts" />
  <page-2 render-js-function-source="http://localhost:3002/src/main.ts" />
  <page-3 render-js-function-source="http://localhost:3003/src/main.ts" />
</app>

So, if there is no public path for development, some static resources will 404

[sapphi-red]

I see.
To support full URL base during dev, Vite will need to rewrite every url to full URL and I suppose that will make Vite slow.

For a workaround, doing the following might work:

• replace http://localhost:300\d with http://localhost:10000/300\d
• proxy http://localhost:10000/300\d to http://localhost:300\d/300\d
• set base as /300\d/ for each http://localhost:300\d

[Yiniau]

I see. To support full URL base during dev, Vite will need to rewrite every url to full URL and I suppose that will make Vite slow.

For a workaround, doing the following might work:

• replace http://localhost:300\d with http://localhost:10000/300\d
• proxy http://localhost:10000/300\d to http://localhost:300\d/300\d
• set base as /300\d/ for each http://localhost:300\d

Actually, only 'some' resource like image will 404, this sounds to work for me, THANKS