在做项目环境变量配置前，可以先到官网回忆一下环境变量的基本使用， 环境变量和模式 | Vite 官方中文文档
一、环境模式
首先环境变量是可以分模式的，常用模式如下：
.env # 所有情况下都会加载 .env.local # 所有情况下都会加载，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但会被 git 忽略
默认 dev 环境下使用 .env.development 环境变量配置， build 环境下使用 .env.production ，所以不需要在 package.json 中再指定模式了
"scripts": { "dev": "vite --mode development", // --mode development可以省略，运行 npm run dev 自动指定 "build": "vue-tsc --noEmit && vite build --mode production", // --mode production可以省略，运行 npm run build 自动指定 "preview": "vite preview" },
--mode 一般在其他特殊自定义下指定使用。
二、环境变量分类
2.1 默认环境变量
import.meta.env.MODE: {string} 应用运行的模式 import.meta.env.BASE_URL: {string} 部署应用时的基本 URL import.meta.env.PROD: {boolean} 应用是否运行在生产环境 import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)
2.2 应用级环境变量
以 VITE_ 开头，这样会被vite处理，如下：
.env.developlent
VITE_api_URL=/api/ VITE_LOCATION_ORIGIN=http://localhost:3000/
另外自定义的环境变量，还需要在 env.d.ts 中声明变量类型
/// <reference types="vite/client" /> interface ImportMetaEnv { readonly VITE_TITLE: string readonly VITE_API_URL: string } interface ImportMeta { readonly env: ImportMetaEnv } declare module '*.vue' { import type { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component }
三、加载优先级
模式覆盖通用，如：在生产环境下， .env.production 中的同名环境变量会覆盖 .env 中同名配置，其他同理
四、环境变量使用
Vite把环境变量通过 import.meta.env 暴露出来，在 .vue 中使用方式如下：
<script setup lang="ts"> console.log(import.meta.env) </script>
但如果要在 axios 中使用就需要特别配置了，需要在 vite.config.js 中加载环境变量，我们可以像以下这种方式处理：
import { defineConfig, loadEnv } from 'vite' // https://vitejs.dev/config/ export default ({ mode }) => defineConfig({ define: { 'process.env': loadEnv(mode, process.cwd()) }, }
这样配置完成后就可以在 plugins 下 axios.ts 中使用了
const { VITE_API_URL } = process.env const instance = axios.create({ baseURL: VITE_API_URL }); export default instance
五、vue.config.ts 配置
一、进入项目根目录下的package.json文件，增加多个环境模式。
"scripts": { "dev": "vite serve --mode development", "test": "vite serve --mode test", "ppe": "vite serve --mode ppe", "prod": "vite serve --mode production", "build:dev": "vue-tsc --noEmit && vite build --mode development", "build:test": "vue-tsc --noEmit && vite build --mode test", "build:ppe": "vue-tsc --noEmit && vite build --mode ppe", "build:prod": "vue-tsc --noEmit && vite build --mode production", "serve": "vite preview" }
二、在项目根目录下增加环境变量的文件。
如：开发环境dev，创建.env.development文件
# 开发环境变量 VITE_APP_TITLE='development' VITE_API_URL = 'http://000.000.000.00:0000/'
三、执行npm run dev,配置的开发环境变量便生效。
四、vue文件中访问import.mate.env
console.log('VITE_APP_TITLE:' + import.meta.env.VITE_APP_TITLE);
