vite dev can't set base url like vite build

[jacob-lcs]

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.

[edersoares]

I have the same issue with backend integration.

We work with many frontends to one backend and we can't server the assets by the same backend.

This PR #1556 implements the use of the base config for development, but have different behavior between dev and build commands.

I get a workaround adding a baseAssetUrl config main...edersoares:assets-server. I think that is not the best solution, but works for while to me.

With this, I just need that the backend return the HTML with:

<!-- APP 1 -->
<div id="app"></div>
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.ts"></script>

<!-- APP 2 -->
<div id="app"></div>
<script type="module" src="http://localhost:3001/@vite/client"></script>
<script type="module" src="http://localhost:3001/src/main.ts"></script>

And my vite.config.ts like this:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  baseAssetUrl: 'http://localhost:3000/',
  server: {
    hmr: {
      path: '/',
      host: 'localhost',
      port: 3000,
      protocol: 'ws'
    }
  }
})

Now, when access the backend URL, I just get the root HTML from backend and the scripts, styles and assets from Vite Server.

I believe that the base config should have the same behavior to the build and dev commands.

[wvffle]

@edersoares I'm looking at your workaround and I don't quite understand how would it make any difference. Could you explain?

[edersoares]

@wvffle sure!

In development, we have a backend host running on https://backend.test/api and some different frontends running on https://backend.test/app and https://backend.test/admin that have two different Vue projects. They use the same backend.

Our backend serve only the root HTML for /app and /admin routes in development mode and request @vite/client and src/main.ts from http://localhost:3000 and http://localhost:4000 for example.

The problem is that the assets in Vue projects are requested with root path /img/logo.png, so how we have two different logo.png, if the backend serve the assets, the image will be the same.

For this, we need that the assets URL should returned with frontend URL, so, when we access https://backend.test/app, the logo.png requested will be http://localhost:3000/img/logo.png and when we access https://backend.test/admin will be http://localhost:4000. This works like a CDN, where the assets files will be handled by a assets server and not by backend.

The command vite build compiles the assets with complete URL base, but vite dev doesn't.

@wvffle did you undersand?

[wvffle]

Yeah, I get that, thanks @edersoares!

However, I need vite dev to compile with http://localhost:3000/ base URL and vite build without. I could do that by checking the command or mode if only the dev server would respect the base option.

As a workaround I've added a proxy from backend to vite for the public routes and __vite_ping

[edersoares]

@wvffle could you share your solution?

[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.