Set base with environment variable

[NicholasLYang]

Clear and concise description of the problem

I'm running vite as part of bunch of nested npm scripts:

{ 
  "scripts": {
    "build": "npm run build:wasm && npm run build:js",
    "build:js": "tsc && vite build",
    "build:wasm": "wasm-pack build --target web --release",
    }
}

I'd like to pass a base url, but due to a limitation with npm, it's rather hard to pass in arguments to nested scripts. Instead, I'd like the ability to have it passed as an environment variable, i.e. BASE_URL=/foobarbaz/ npm run build

Suggested solution

Not really sure honestly, would love some guidance.

Alternative

Bug the npm/pnpm people to get better argument propagation. I'll try this too!

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[patak-dev]

Related #3522

@NicholasLYang we are working to properly support relative base in Vite 3 here:

• feat!: relative base #7644

The idea is that you will use base: '' or base: 'auto' (still discussing the details), and every path in your app will be relative or use new URL(..., import.meta.url).

Could you check if that PR fixes this issue? The generated HTML and assets can then be deployed with any base.

[sapphi-red]

I think it is possible to do it like this.

// BASE="/foo/" npm run build
import { defineConfig } from 'vite'

export default defineConfig({
  base: process.env.BASE
})

[patak-dev]

Oh, I should read more closely next time 🤦🏼
Thanks @sapphi-red!

Just for completeness, if you ever want to access an env file in the config, you need to manually loaded. See https://vitejs.dev/config/#environment-variables

[NicholasLYang]

@sapphi-red thanks! That'll work for me. I'll close this issue if there's nothing else to discuss