diff --git a/package.json b/package.json
index 09da0a97c7ddfc..af0c510b5d8102 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "clean-css": "^4.2.3",
     "debug": "^4.1.1",
     "dotenv": "^8.2.0",
+    "dotenv-expand": "^5.1.0",
     "es-module-lexer": "^0.3.18",
     "esbuild": "^0.4.1",
     "etag": "^1.8.1",
diff --git a/src/node/config.ts b/src/node/config.ts
index 9e471fd7fbe215..f777f5c84e1c91 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import fs from 'fs-extra'
 import chalk from 'chalk'
 import dotenv, { DotenvParseOutput } from 'dotenv'
+import dotenvExpand from 'dotenv-expand'
 import { Options as RollupPluginVueOptions } from 'rollup-plugin-vue'
 import { CompilerOptions, SFCStyleCompileOptions } from '@vue/compiler-sfc'
 import Rollup, {
@@ -465,6 +466,7 @@ function loadEnv(mode: string, root: string): Record<string, string> {
       if (result.error) {
         throw result.error
       }
+      dotenvExpand(result)
       for (const key in result.parsed) {
         // only keys that start with VITE_ are exposed.
         if (key.startsWith(`VITE_`)) {
diff --git a/yarn.lock b/yarn.lock
index db9f50c9e17872..547e444a85da88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2286,6 +2286,11 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
 dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"