fix(config)!: support development build

docs/guide/env-and-mode.md

@@ -120,7 +120,7 @@ VITE_APP_TITLE=My App
 
 In your app, you can render the title using `import.meta.env.VITE_APP_TITLE`.
 
-However, it is important to understand that **mode** is a wider concept than just development vs. production. A typical example is you may want to have a "staging" mode where it should have production-like behavior, but with slightly different env variables from production.
+However, it is important to understand that **mode** is a wider concept than just development vs. production. A typical example is you may want to build in a "staging" mode where it should have development-like behavior and with slightly different env variables from production.
 
 You can overwrite the default mode used for a command by passing the `--mode` option flag. For example, if you want to build your app for our hypothetical staging mode:
 
@@ -132,8 +132,8 @@ And to get the behavior we want, we need a `.env.staging` file:
 
 ```
 # .env.staging
-NODE_ENV=production
+NODE_ENV=development
 VITE_APP_TITLE=My App (staging)
 ```
 
-Now your staging app should have production-like behavior, but display a different title from production.
+Now your staging app should have development-like behavior, and display a different title from production.

packages/vite/src/node/__tests__/env.spec.ts

@@ -15,7 +15,6 @@ describe('loadEnv', () => {
           "VITE_ENV1": "ENV1",
           "VITE_ENV2": "ENV2",
           "VITE_ENV3": "ENV3",
-          "VITE_USER_NODE_ENV": "production",
         }
       `)
   })
@@ -36,14 +35,13 @@ describe('loadEnv', () => {
         {
           "VITE_APP_BASE_ROUTE": "/app/",
           "VITE_APP_BASE_URL": "/app/",
-          "VITE_USER_NODE_ENV": "production",
         }
       `)
   })
 
   test('VITE_USER_NODE_ENV', () => {
     loadEnv('development', join(__dirname, './env'))
-    expect(process.env.VITE_USER_NODE_ENV).toEqual('production')
+    expect(process.env.VITE_USER_NODE_ENV).toEqual(undefined)
   })
 
   test('Already exists VITE_USER_NODE_ENV', () => {

packages/vite/src/node/__tests__/env/.env.development

@@ -1,4 +1,3 @@
-NODE_ENV=production
 VITE_ENV1=ENV1
 VITE_ENV2=ENV2
 VITE_ENV3=ENV3

packages/vite/src/node/config.ts

@@ -378,10 +378,11 @@ export async function resolveConfig(
   let config = inlineConfig
   let configFileDependencies: string[] = []
   let mode = inlineConfig.mode || defaultMode
+  const isNodeEnvSet = !!process.env.NODE_ENV
 
   // some dependencies e.g. @vue/compiler-* relies on NODE_ENV for getting
   // production-specific behavior, so set it early on
-  if (!process.env.NODE_ENV) {
+  if (!isNodeEnvSet) {
     process.env.NODE_ENV = defaultNodeEnv
   }
 
@@ -494,16 +495,14 @@ export async function resolveConfig(
     loadEnv(mode, envDir, resolveEnvPrefix(config))
 
   // Note it is possible for user to have a custom mode, e.g. `staging` where
-  // production-like behavior is expected. This is indicated by NODE_ENV=production
+  // development-like behavior is expected. This is indicated by NODE_ENV=development
   // loaded from `.staging.env` and set by us as VITE_USER_NODE_ENV
-  const isProduction =
-    (process.env.NODE_ENV || process.env.VITE_USER_NODE_ENV || mode) ===
-    'production'
-  if (isProduction) {
-    // in case default mode was not production and is overwritten
-    process.env.NODE_ENV = 'production'
+  if (!isNodeEnvSet && process.env.VITE_USER_NODE_ENV === 'development') {
+    process.env.NODE_ENV = 'development'
   }
 
+  const isProduction = process.env.NODE_ENV === 'production'
+
   // resolve public base url
   const isBuild = command === 'build'
   const relativeBaseShortcut = config.base === '' || config.base === './'