vite报错 process is not defined

原因: process.env 已经被遗弃

解决方法1(官方推荐):
使用import.meta.env代替process.env关键字

解决方法2:
在 vite.config.ts 中增加 define

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})
1
2
3
4
5
6
7
8
或者

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})
 

### 解决 ViteVue3 项目中打包运行时报错 `process is not defined` 的问题 在使用 Vite 构建 Vue3 项目时,如果代码中使用了 `process.env`,可能会遇到 `process is not defined` 的错误。这是因为 Vite 默认不支持 Node.js 的全局变量 `process`,并且在现代浏览器环境中,`process` 并不存在[^1]。 为了修复该问题,可以在 `vite.config.ts` 文件中通过配置 `define` 属性来定义 `process.env`。以下是完整的解决方案: #### 配置 `vite.config.ts` 需要在 Vite 的配置文件中添加 `define` 字段,并将 `process.env` 定义为一个空对象或根据实际需求填充环境变量。 ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { 'process.env': {} // 将 process.env 定义为空对象以避免报错 } }) ``` 上述配置会将所有对 `process.env` 的引用替换为一个空对象,从而避免运行时的错误[^2]。 #### 如果需要支持多环境变量 如果项目中需要支持多环境变量(例如开发环境、测试环境和生产环境),可以结合 `vite` 的 `.env` 文件功能。Vite 自动加载以 `.env` 开头的环境变量文件,并将其注入到 `import.meta.env` 中[^3]。 以下是一个示例配置: ```typescript import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), '') return { plugins: [vue()], define: { 'process.env': env // 使用 loadEnv 加载当前模式下的环境变量 } } }) ``` 在项目根目录下创建 `.env` 文件,例如: ``` VITE_API_URL=https://api.example.com ``` 然后在代码中可以通过 `import.meta.env.VITE_API_URL` 访问该变量。 #### 注意事项 - 如果项目中使用了第三方库且这些库依赖于 `process`,可能需要额外安装 `node-polyfill-webpack-plugin` 或者类似工具来模拟 `process` 环境。 - 在某些情况下,直接定义 `process.env` 可能不够,需要更复杂的 polyfill 支持,例如通过 `@esbuild-plugins/node-globals` 插件实现[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值