如何访问vite环境变量一. vite怎么访问环境变量 import.meta.env.VITE_BASE_ROUTER

一. vite怎么访问环境变量

import.meta.env.VITE_BASE_ROUTER 是 Vite 中用于访问环境变量的方式。

在 Vite 中，任何以 VITE_ 开头的环境变量都会被自动注入到客户端代码中，通过 import.meta.env 可以访问这些变量。因此，import.meta.env.VITE_BASE_ROUTER 代表一个环境变量，可能是定义在 ‘.env’ 文件或其他环境文件中的一个路由基础路径。

二. 项目中怎么使用

其作用主要是在项目中动态配置路由的基础路径，这样可以根据不同的环境（开发、测试、生产等）来设置不同的路由前缀，而不需要在代码中写死路径。这种做法使得代码更加灵活和可维护。

1. 使用场景


const router = createRouter({
    history: createWebHistory(import.meta.env.VITE_BASE_ROUTER),
    routes: baseRoutes,
})

2. 下图是项目中环境变量配置文件：

3. 下面是环境变量文件的配置（参考）：

VITE_BASE_ROUTER=/XXX-dev/
VITE_API_URL=/XXX-dev/api/

VITE_BASE_ROUTER=/XXX-test/
VITE_API_URL=/XXX-test/api/

VITE_BASE_ROUTER=/XXX-prod/
VITE_API_URL=/XXX-prod/api/