未捕获的引用错误：进程未定义
如何解决以下错误？
Uncaught ReferenceError: process is not defined
首先，当你在Vite/React 项目中添加与以下代码等效的代码时，就会发生这种情况：
const someValue = process.env.SOME_KEY;
换句话说，你只是想从.env文件中读取一个值，其中包含类似这样的赋值语句：
SOME_KEY=A_VERY_IMPORTANT_VALUE_YOU_NEED
解决这个问题
-
打开
vite.config.ts文件 -
添加
loadEnv您的导入项：import { defineConfig, loadEnv } from 'vite' -
添加
env常量赋值：const env = loadEnv(mode, process.cwd(), ''); -
define在与数组同一层级添加一个对象plugins：
return {
define: {
'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
},
plugins: [react()],
}
完整代码
现在，这是before&after代码。
之前的文件vite.config.ts：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
文件vite.config.ts之后：
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
define: {
'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
},
plugins: [react()],
}
})
最后几点说明
所以，如果你和我一样，你可能会想：“等等！难道我要手动在.env文件中写入每一个新的键值对，而且还要在后面重复一遍吗vite.config.ts？”
嗯……这个方案就意味着如此！我对此并不满意，但至少它提供了一个解决方案。
为什么这个解决方案很重要？因为Netlify上的CI/CD流程会因为这个Uncaught ReferenceError: process is not defined错误而失败。
替代方案：
如果您希望避免在vite.config.ts文件中重复键名，可以采用以下方法：
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
define: {
'process.env': env
},
plugins: [react()],
}
})
免责声明
您可能不希望将全部内容暴露process.env给前端，因此手动选择您希望在前端访问的值的键/名称，就成了一种security方法……
另外，请注意，在after建议的代码中，如果您需要手动选择键，则可能需要也可能不需要设置stringify所选键的值。
或许有更好的替代方案。
我想折中的解决方案是创建一个数组，其中包含你想从中挑选的键的名称process.env，然后遍历该数组，以便动态生成分配给该define键的对象。
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
const cherryPickedKeys = [
"SOME_KEY_IN_YOUR_ENV_FILE",
"SOME_OTHER_KEY_IN_YOUR_ENV_FILE",
];
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
const processEnv = {};
cherryPickedKeys.forEach(key => processEnv[key] = env[key]);
return {
define: {
'process.env': processEnv
},
plugins: [react()],
}
})
TypeScript 的最后说明
如果你的项目是用 TypeScript 编写的，则会出现智能感知问题，这也会导致 CI/CD 流程失败：
Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.ts(2580)
事实证明，按照 VS Code 的建议安装@types/node软件包后，问题确实解决了！