Environment Variable Configuration
Description
Environment variables are located in the .env, .env.development, and .env.production files in the project root directory.
.env
- Purpose: Applicable to all environments. Variables defined here can be accessed in any environment.
- Usage: Generally used for common configurations such as API base URLs, application names, etc.
.env.development
- Purpose: Only applicable to the development environment. When you run
pnpm dev, Vue will load the environment variables from this file. - Usage: Suitable for development stage configurations such as local API addresses, debug settings, etc.
.env.production
- Purpose: Only applicable to the production environment. When you run
pnpm build, Vue will load the environment variables from this file. - Usage: Suitable for production stage configurations such as production API addresses, disabling debug mode, etc.
Custom Environment Variables
INFO
Custom environment variables must start with VITE_
For example:VITE_PROT
You can access them in your project code like this:
ts
console.log(import.meta.env.VITE_PROT);Environment Configuration Description
bash
# [Common] Environment Variables
# Version number
VITE_VERSION = 2.4.1.1
# Port number
VITE_PORT = 3006
# Website URL prefix
VITE_BASE_URL = /art-design-pro/
# API URL prefix
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
# Permission mode (frontend | backend)
VITE_ACCESS_MODE = frontend
# Whether to open route information
VITE_OPEN_ROUTE_INFO = false
# Lock screen encryption key
VITE_LOCK_ENCRYPT_KEY = jfsfjk1938jfjbash
# [Development] Environment Variables
# Website URL prefix
VITE_BASE_URL = /
# API URL prefix
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
# Delete console
VITE_DROP_CONSOLE = falsebash
# [Production] Environment Variables
# Website URL prefix
VITE_BASE_URL = /art-design-pro/
# API URL prefix
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
# Delete console
VITE_DROP_CONSOLE = true