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

前言

记录下踩的坑。。。

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

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

正文

先说环境

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

bash 复制代码
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中显示:

bash 复制代码
...
"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 代码

js 复制代码
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()],
    // 其他配置...
  }
});
相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript