首页Vue3 - Vite运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）

Vue3 - Vite运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）

时间: 2025-06-06 07:49:18 浏览: 25

### Vue3 和 Vite 打包运行时 `process is not defined` 错误解决方案当使用 Vite 构建 Vue3 应用程序时，可能会遇到 `process is not defined` 的错误。这是因为 Vite 默认不支持 Node.js 的全局变量 `process`，而许多项目可能依赖于 `process.env` 来管理环境变量。为了修复此问题，可以在项目的配置文件 `vite.config.ts` 或 `vite.config.js` 中通过设置 `define` 属性来重新引入 `process.env`[^1]。以下是具体的实现方法： #### 修改 `vite.config.ts` ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { 'process.env': {} } }) ``` 在此代码片段中，`define` 是一个对象，用于在构建过程中替换指定的全局变量。这里我们将 `process.env` 替换为空对象 `{}`，从而解决了 `process is not defined` 的问题[^2]。如果需要更复杂的环境变量处理，可以进一步扩展 `process.env` 的定义。例如： ```typescript define: { 'process.env': { NODE_ENV: '"production"', // 使用字符串模板语法包裹值 API_URL: JSON.stringify('https://api.example.com') // 转换为 JSON 字符串 } } ``` 这样不仅可以解决 `process.is not defined` 的问题，还可以自定义环境变量供应用程序使用。 --- #### 注意事项 - 如果仍然存在其他与 `process` 相关的问题，可以通过安装插件如 [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace) 进一步处理。 - 对于生产环境下的优化，建议清理不必要的开发模式代码并启用压缩工具（如 Terser），以减少最终打包体积。 ---

阅读全文