fix(config)!: support development build (#11045)

docs/guide/env-and-mode.md

@@ -120,20 +120,22 @@ 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.
-
-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:
+In some cases, you may want to run `vite build` with a different mode to render a different title. 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 a staging mode:
 
 ```bash
 vite build --mode staging
 ```
 
-And to get the behavior we want, we need a `.env.staging` file:
+And create a `.env.staging` file:
 
 ```
 # .env.staging
-NODE_ENV=production
 VITE_APP_TITLE=My App (staging)
 ```
 
-Now your staging app should have production-like behavior, but display a different title from production.
+As `vite build` runs a production build by default, you can also change this and run a development build by using a different mode and `.env` file configuration:
+
+```
+# .env.testing
+NODE_ENV=development
+```

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,24 @@ 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'
+  const userNodeEnv = process.env.VITE_USER_NODE_ENV
+  if (!isNodeEnvSet && userNodeEnv) {
+    if (userNodeEnv === 'development') {
+      process.env.NODE_ENV = 'development'
+    } else {
+      // NODE_ENV=production is not supported as it could break HMR in dev for frameworks like Vue
+      logger.warn(
+        `NODE_ENV=${userNodeEnv} is not supported in the .env file. ` +
+          `Only NODE_ENV=development is supported to create a development build of your project. ` +
+          `If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.`
+      )
+    }
   }
 
+  const isProduction = process.env.NODE_ENV === 'production'
+
   // resolve public base url
   const isBuild = command === 'build'
   const relativeBaseShortcut = config.base === '' || config.base === './'