foreword
We need various configuration information (such as application title, API address, etc.) when working on projects, which may be different in different environments (such as development environment and production environment).
If you need to modify the relevant configuration in the source code every time you change the development or production environment, this will cause the maintainability of the application to become extremely low! Therefore, we can manage these configuration information through environment variables.
1. Environment variables and usage scenarios
Therefore, the definition of environment variables is: variables that change values according to the current code environment are called environment variables.
In the Vite project, using environment variables provides a way to customize application behavior in different environments. By reading environment variables, we can set different configuration information.
Common scenarios in development include:
- Separate development and production environments
Environment variables can be used to easily distinguish whether the current application is running in the development or production environment. For example, in a development environment, console logging and debugging tools can be enabled, while in a production environment, these functions need to be turned off to improve performance and security.
- Configure the API address accessed by the application
The application communicates with the backend API through HTTP requests. The address of the API server may be different in development and production environments. Through environment variables, the API address can be extracted from the application code, and different addresses can be specified in different environments.
- other configuration information
In addition to the API address, the application has many other configuration information, such as application title, theme color, version number, etc. These information can be managed using environment variables, avoiding hard coding in the application code, and improving the maintainability and scalability of the code.
- configuration at build time
Enable debug mode in development, disable console output in production, etc. In addition, environment variables can also be used for resource location, such as selecting different API addresses, CDN paths, etc. according to the current environment.
Two, import.meta.envandloadEnv
-
import.meta.env
1. Define environment variables in .envthe file
VITE_APP_TITLE=Hello Vite!
2. In the code, you can use to import.meta.envdirectly read the environment variables
// main.js
console.log(import.meta.env.VITE_APP_TITLE); // 输出：Hello Vite!
-
loadEnv
1. In the code, you need to import the environment variable module provided by Vite
// main.js
import.meta.env.DEV && require('dotenv').config(); // 在开发环境下自动加载 .env 文件
import { loadEnv } from 'vite';
loadEnv();
2. Use loadEnvthe method to read environment variables
// main.js
console.log(process.env.VITE_APP_TITLE); // 输出：Hello Vite!
3. Precautions for use
1. import.meta.envloadEnv different usage scenarios from
import.meta.envIt is to obtain the value of the environment variable at runtime , which is suitable for occasions where the environment variable needs to be obtained dynamically in the application code. ( It cannot be obtained from the configuration file , because the configuration file is read at build time!!!)
loadEnvAnd is to load environment variables at build time, which is suitable for occasions where environment variables need to be referenced during packaging (build time) .
2. The value of the environment variable must start with VITE_
As mentioned above, Vite requires that all environment variables must VITE_start with . If you want to use import.meta.envor loadEnvget the value of an environment variable, you need to follow this rule.
However, variables that do not start with can also be obtained VITE_, but the configuration in the configuration file needs to be modified prefixes (not recommended).
The loadEnv function can obtain non- VITE_prefixed variables by changing the third parameter.
function loadEnv(
mode: string,
envDir: string,
prefixes: string | string[] = 'VITE_',
): Record<string, string>
The third parameter above is the prefix, by default VITE_, but it can be changed to '' an empty string.