`vite dev` can't set base url like `vite build`

Describe the bug

I follow the Backend Integration section so that I can use koa to serve my app.

But I can’t load assets files like image. Just like this…

Reproduction

Sorry I can’t upload the project to the github. I just follow the document, and I want the prefix address of the static resource to be converted from the root directory to the base that I set.

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import staticConfig from '../../config/staticConfig'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  base: staticConfig.development, // because server and client don't have same port, so I have to specified base url.
  server: {
    host: '0.0.0.0',
    port: staticConfig.port,
    strictPort: true,
  },
  rollupOptions: {
    input: '/src/main.tsx',
  },
  build: {
    manifest: true,
  },
})

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.2.2
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 95.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.5.0 - ~/.nvm/versions/node/v12.5.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.5.0/bin/yarn
    npm: 7.7.5 - ~/.nvm/versions/node/v12.5.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: 89.0.774.63
    Firefox Developer Edition: 87.0
    Safari: 14.0.3

Used package manager: yarn

Logs

vite:config bundled config file loaded in 241ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'react-refresh',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   base: '/',
  vite:config   server: { host: '0.0.0.0', port: 4080, strictPort: true },
  vite:config   rollupOptions: { input: '/src/main.tsx' },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: true,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   configFile: '/Users/jacob/Desktop/MyProject/kol/src/client/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: 'vite.config.js',
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/jacob/Desktop/MyProject/kol/src/client',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/jacob/Desktop/MyProject/kol/src/client/public',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: '/Users/jacob/Desktop/MyProject/kol/src/client/node_modules/.vite',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /Users/jacob/Desktop/MyProject/kol/src/client/1111.html +0ms
  vite:resolve 0ms   ./src/main.tsx -> /Users/jacob/Desktop/MyProject/kol/src/client/src/main.tsx +0ms
  vite:resolve 4ms   react -> /Users/jacob/Desktop/MyProject/kol/node_modules/react/index.js +9ms
  vite:resolve 2ms   react-dom -> /Users/jacob/Desktop/MyProject/kol/node_modules/react-dom/index.js +2ms
  vite:resolve 1ms   ./App -> /Users/jacob/Desktop/MyProject/kol/src/client/src/App.tsx +1ms
  vite:deps Scan completed in 52ms: {
  react: '/Users/jacob/Desktop/MyProject/kol/node_modules/react/index.js',
  'react-dom': '/Users/jacob/Desktop/MyProject/kol/node_modules/react-dom/index.js'
} +38ms
Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)
  vite:resolve 0ms   object-assign -> null +0ms
  vite:resolve 2ms   object-assign -> /Users/jacob/Desktop/MyProject/kol/node_modules/object-assign/index.js +0ms
  vite:resolve 0ms   scheduler -> null +34ms
  vite:resolve 4ms   scheduler -> /Users/jacob/Desktop/MyProject/kol/node_modules/scheduler/index.js +35ms
  vite:resolve 0ms   scheduler/tracing -> null +4ms
  vite:resolve 1ms   scheduler/tracing -> /Users/jacob/Desktop/MyProject/kol/node_modules/scheduler/tracing.js +1ms
  vite:deps deps bundled in 101ms +0ms

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[wvffle]

I’m using django as a backend. Here is my solution: https://github.com/wvffle/django-e2ee-chat/blob/1c9d434caa174f8a761504affe49517ce33f3036/chat/urls.py#L17-L28

I simply pass all of the requests to __vite_ping, @windicss-devtools-update and chat/public/* to the frontend when the backend is in dev mode as well. It’s not the best solution, but works.

I’m already using docker for my dev env so I might switch to using haproxy instead somewhere in the future.

[edersoares]

@wvffle could you share your solution?