1：文件位置

2：env.d.ts配置（按照官网）

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_REQUEST_BASE_UR: string | undefined
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

3：.env.production文件配置（生产环境）

# .env.production
NODE_ENV = 'production'
VITE_APP_TITLE= 'vite_admin'
VITE_REQUEST_BASE_URL= 'www.baidu.com'

4：.env.development文件配置（开发环境）

# .env.development
NODE_ENV = 'development'
VITE_APP_TITLE= 'vite_admin'
VITE_REQUEST_BASE_URL= 'www.baidu.com'

.env.development和.env.production内的变量必须以VUE_APP或VITE_APP开头

写在最后：

一直搞不清楚生产环境和开发环境分别是哪个阶段，特意查询了一下

原文链接：开发环境、生产环境、测试环境的区别 - 知乎

项目部署环境一般可分为三种：生产环境，测试环境，开发环境
开发环境（ 0 --> 0.8）：开发环境时程序猿们专门用于开发的服务器，开发环境的分支，开发环境的分支一般是feature分支

测试环境（0.8 --> 1）：项目开发完成进入测试阶段，原开发环境代码克隆修改版，测试环境的分支一般是develop分支

生产环境（1 --> @next）：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支