【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()],
    // 其他配置...
  }
});
相关推荐
2501_9159184125 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫3 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css