解决JeeSite打包上线中的Uncaught TypeError: Cannot destructure property ‘VITE_GLOB_APP_TITLE‘问题

原创已于 2024-04-16 11:02:15 修改 · 1.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #前端 #vue.js #javascript #html5 #vben #typescript

于 2024-04-07 11:14:08 首次发布

欢迎加入我们的前端技术学习交流群，关注“前端组件开发”公众号，私信申请入群哦！

在前端开发中，特别是当我们需要将项目打包并部署到生产环境时，经常会遇到一些意料之外的错误。今天，我将分享在JeeSite项目中遇到的一个典型问题——Uncaught TypeError: Cannot destructure property 'VITE_GLOB_APP_TITLE' of 'ENV' as it is undefined，并探讨如何解决这个问题。

一、问题描述

在JeeSite项目中，当我们尝试将项目打包并部署到线上环境时，可能会遇到上述的TypeError。这个错误通常发生在项目尝试从全局对象window中解构ENV对象时，但ENV对象却未定义。这通常是因为在构建过程中，环境变量的注入没有正确完成，或者线上环境没有正确设置这些环境变量。

二、错误定位

通过查看报错信息，我们可以定位到问题出现在src/utils/env.ts文件中。在这个文件中，项目试图从window对象中获取环境变量配置。然而，在某些情况下，特别是当使用现代前端构建工具（如Vite或Webpack）进行打包时，环境变量并不会直接注入到window对象中。

三、解决方案

为了解决这个问题，我们需要确保环境变量在运行时是可用的。一种解决方案是在构建过程中将环境变量注入到代码中，而不是依赖于运行时从window对象中获取。然而，这通常需要构建工具的支持，并且可能需要对构建配置进行一些调整。

在src/utils/env.ts文件中，我们可以尝试一种更健壮的获取环境变量的方法。具体地，我们可以先检查window对象中是否存在ENV属性，如果不存在，则回退到使用import.meta.env来获取环境变量。import.meta.env是Vite等现代构建工具提供的一种在模块内部访问环境变量的方式。

修改后的代码如下：

typescript复制代码

	`const ENV_NAME = 'VITE_APP_ENV';`
	`const GlobEnvConfig = (window[ENV_NAME as any] ? window[ENV_NAME as any] : import.meta.env) as unknown as GlobEnvConfig;`

在这个修改中，我们首先检查window[ENV_NAME as any]是否存在。如果存在，我们就使用它；如果不存在，我们就回退到使用import.meta.env。这样，无论环境变量是通过window对象还是通过构建工具注入的，我们都能确保获取到正确的环境变量配置。

    //  修改前代码

const ENV = (import.meta.env.DEV
    ? // Get the global configuration (the configuration will be extracted independently when packaging)
      (import.meta.env as unknown as GlobEnvConfig)
      : window[ENV_NAME as any]) as unknown as GlobEnvConfig;


  // 修改后代码
const ENV = (import.meta.env.DEV
    ? // Get the global configuration (the configuration will be extracted independently when packaging)
      (import.meta.env as unknown as GlobEnvConfig)
    :(window[ENV_NAME as any] ? window[ENV_NAME as any] : import.meta.env as unknown as GlobEnvConfig)) as unknown as GlobEnvConfig;

修改前