Asset Not Loaded When Integrating With Existing Backend

Describe the bug

When I import an asset

import audio from "./do.mp3";

audio resolves to something like base/**/do.mp3 in development mode. I am integrating Vite into an existing backend. The backend is running at localhost:4000 and vite is running at localhost:3000. So during development, the existing backend at localhost:4000 does not yet have base/**/do.mp3.

For production though, it works fine, vite build will produce the files that the existing backend at localhost:4000 will be able to serve

I think that this should be noted in the docs or maybe audio can resolve to something like localhost:3000/base/**/do.mp3 instead

Reproduction

https://stackblitz.com/edit/vitejs-vite-kkwd9h?file=src/main.js

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 179.39 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Safari: 15.4
  npmPackages:
    vite: ^2.9.1 => 2.9.1

Used Package Manager

yarn

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.

[Zehua-Chen]

I have opened a PR at #8103 to incorporate the discussion in this issue.

[jessarcher]

I don’t think server.origin fixes it for me.

Hopefully this explains the issue I’m trying to solve:

Example Laravel project structure:

public/ <-- nginx is serving this directory
  images/
    taylor.jpg
resources/
  images/
    abigail.jpg
  js/
    app.js
    Welcome.vue

Example Vite config:

{
    base: command === 'build' ? 'build' : '',
    publicDir: false,
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
           input: 'resources/js/app.js'
        }
    }
}

Welcome.vue:

<!--
    Vite should leave absolute paths as-is so nginx can serve them from the
    public directory.

    The PR at https://github.com/vitejs/vite/pull/6779 hopefully addresses this
    but I haven't tested yet.
-->
<img src="/images/taylor.jpg" />

<!--
    Vite resolves this from disk and rewrites the URL.

    In build mode, the file is versioned in the outDir (e.g. public/build) and
    the URL is correctly rewritten as `/build/assets/abigail.123456.js` which
    nginx can serve.

    In serve mode, Vite serves the file at
    `http://localhost:3000/images/abigail.jpg` but the URL is only rewritten as
    `/images/abigail.jpg`, so the browser makes the request to the backend
    server where the file does not exist publicly. Setting `server.origin` to
    the backend server would only make this unwanted behaviour explicit.
    Ideally, this would be rewritten to include the full URL to the Vite server
    (`http://localhost:3000/images/abigail.jpg`).
-->
<img src="../images/abigail.jpg" />