loadEnv overrides mode env file

[agileago]

Describe the bug

in this case. when i have a .env file

VITE_APP_BASE_ROUTE=/
VITE_APP_BASE_URL=$VITE_APP_BASE_ROUTE

and when i build for some mode . i will add .env.mode like .env.production

VITE_APP_BASE_ROUTE=/app/

i should get the result like this:

{
   VITE_APP_BASE_ROUTE: "/app/",
   VITE_APP_BASE_URL: "/app/"
}

but vite give the result:

{
   VITE_APP_BASE_ROUTE: "/app/",
   VITE_APP_BASE_URL: "/"
}

i think it is a error result. when i use the vue-cli . its result is right and nature

https://github.com/vuejs/vue-cli/blob/8b5ab227627a3bfbea31b24364f060154a9b0b89/packages/%40vue/cli-service/lib/Service.js#L101-L121

Reproduction

https://github.com/vuejs/vue-cli/blob/8b5ab227627a3bfbea31b24364f060154a9b0b89/packages/%40vue/cli-service/lib/Service.js#L101-L121

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 88.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.52
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-legacy: ^2.0.1 => 2.0.1 
    vite: 3.0.9 => 3.0.9

Used Package Manager

pnpm

Logs

vite:config bundled config file loaded in 346.54ms +0ms { VUE_APP_BASE_ROUTE: '/app/', VUE_APP_BASE_URL: '/' } env...... { VUE_APP_BASE_ROUTE: '/app/' } env...... { VUE_APP_BASE_ROUTE: '/', VUE_APP_BASE_URL: '$VUE_APP_BASE_ROUTE' } vite:config using resolved config: { vite:config envPrefix: 'VUE_APP_', vite:config base: '/', vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:tsconfig-paths', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vue3-oop:vue-jsx', vite:config 'vite-plugin-imp', vite:config 'vite-plugin-checker', vite:config 'vite-plugin-html-template', vite:config 'vite:legacy-config', vite:config 'vite:legacy-generate-polyfill-chunk', vite:config 'vite:legacy-env', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'vite:watch-package-data', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:legacy-post-process', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config css: { vite:config preprocessorOptions: { less: [Object], scss: [Object] }, vite:config modules: { vite:config localsConvention: 'camelCaseOnly', vite:config generateScopedName: '[local]--[hash:base64:5]' vite:config } vite:config }, vite:config server: { vite:config preTransformRequests: true, vite:config host: true, vite:config proxy: { '/api': [Object], '/risk_predict': [Object] }, vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } vite:config }, vite:config mode: 'develop', vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config esbuildOptions: { preserveSymlinks: undefined } vite:config }, vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ], vite:config polyfillModulePreload: true, vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config cssTarget: 'chrome61', vite:config sourcemap: false, vite:config rollupOptions: { output: [Array] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] } vite:config }, vite:config esbuild: { include: /.esbuild./ }, vite:config define: { vite:config VUE_OPTIONS_API: true, vite:config VUE_PROD_DEVTOOLS: false, vite:config 'import.meta.env.LEGACY': 'VITE_IS_LEGACY' vite:config }, vite:config configFile: '/Users/jianhuaren/work/zy/report-interpret/vite.config.ts', vite:config configFileDependencies: [ '/Users/jianhuaren/work/zy/report-interpret/vite.config.ts' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: 'develop', vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config optimizeDeps: { force: undefined }, vite:config build: { cssTarget: 'chrome61' } vite:config }, vite:config root: '/Users/jianhuaren/work/zy/report-interpret', vite:config resolve: { alias: [ [Object], [Object] ] }, vite:config publicDir: '/Users/jianhuaren/work/zy/report-interpret/public', vite:config cacheDir: '/Users/jianhuaren/work/zy/report-interpret/node_modules/.vite', vite:config command: 'build', vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: true, vite:config https: undefined, vite:config open: undefined, vite:config proxy: { '/api': [Object], '/risk_predict': [Object] }, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config env: { vite:config VUE_APP_BASE_ROUTE: '/app/', vite:config VUE_APP_BASE_URL: '/', vite:config BASE_URL: '/', vite:config MODE: 'develop', vite:config DEV: false, vite:config PROD: true vite:config }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(0) { set: [Function (anonymous)] }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'vite:watch-package-data', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config rollupOptions: {} vite:config }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false } vite:config } +130ms

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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 vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.