【vite.config.ts】（多环境配置）设置环境文件 .env.local

前言

记录下踩的坑。。。

这次这个坑，印象很深刻，因为网上找了很多答案，基本都是一样的，试过了，都没有用。。。

我猜，可能人家当时的vite版本和我不一样，人家也没把vite版本给写上去。

正文

先说环境

使用 vite脚手架命令创建出 vue3 或者 react 的 ts项目

npm create vite@latest vite-ts-react -- --template react-ts
或
npm create vite@latest vite-ts-vue3 -- --template vue

ps. 
1. 创建项目 node14.18.0(本人当时环境) 能把上面的命令跑完，将项目创建出来，执行 npm install 创建完依赖也没问题
2. 但是执行 npm run dev的时候，会报错，切换成 node18.18.0 能正常跑起来

初始化之后的ts项目，vite版本在package.json中显示：

...
"typescript": "^5.2.2",
"vite": "^5.2.0"
...

2.开始配置 .env.local

在项目根目录创建.env.local文件

.env.local中的值必须要以 【VITE_】 开头，才能被vite项目识别到

.env.lcal文件中的值，在src目录下的任何文件中，都可以在【 import.meta.env】中打印出来

但是这个 【import.meta.env】唯独在 vite.config.ts中 识别不到，而且打印出来还是 undefined

直接在【vite.config.ts】中 打印 import.meta

打印下来，发现 import.meta中 根本没有 env 属性

网上查到的资料，以及 官网中的资料，让你在 tsconfig.json 中加 【"types": ["vite/client"] 】实际操作下来，实测下来依旧没用,。

也有的让你，在 vite-env.d.ts 中添加对 import.meta的env属性的声明，我添加了，依旧没有用。

还有说，用 ts的注释方法 和断言方法

查找原因

后来查了下，发现vite 是需要，借助 【loadEnv】才能加载 .env.local 这样的环境文件，因为【localEnv】方法，是在项目构建时加载环境变量。

而我们所熟知的【import.meta.env】属于是在运行时获取环境变量，因此在 src目录下，我们都能读取到，唯独在 vite.config.ts这个配置文件下读取不到。

最后附上完整 vite.config.ts 代码

import { defineConfig, loadEnv } from 'vite';
import type { ConfigEnv } from 'vite'
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv) => {
  // 一些自定义的逻辑写在这里
  console.log('command', command);
  console.log('mode', mode);
  const root = process.cwd();
  const env = loadEnv(mode, root); // 环境变量对象
  console.log('环境变量------', env);
  const API_PROXY_URL = env.VITE_API_PROXY_URL;
  console.log('API_PROXY_URL', API_PROXY_URL);

 
  return {
    plugins: [react()],
    // 其他配置...
  }
});

原文链接：https://juejin.cn/post/7369114828076859428 作者：海的对岸