Vue Cli+Vuetify+Electron项目process未定义错误求助

你的配置里有几个关键问题，直接按下面的步骤修改就能解决：

1. 安装必要依赖 #

Webpack 5不再默认提供process的polyfill，先安装对应的包：

npm install process --save-dev

2. 修复Webpack配置错误 #

把你的配置文件替换成下面的代码，关键修改点已标注：

const { defineConfig } = require('@vue/cli-service');
const pathModule = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

// 加载.env文件中的环境变量
dotenv.config();

module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    plugins: [
      // 正确注入环境变量到process.env
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
      }),
      // 全局提供process对象的polyfill
      new webpack.ProvidePlugin({
        process: 'process/browser'
      })
    ],
    resolve: {
      fallback: {
        'path': require.resolve('path-browserify'),
        'fs': false,
        // 指向process的polyfill实现
        'process': require.resolve('process/browser')
      }
    }
  },
  // 修复语法错误：移除多余的反引号，同时补充Electron关键配置
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      // Electron 12+默认开启contextIsolation，会隔离渲染进程的Node环境，需关闭
      contextIsolation: false
    }
  }
});

3. 修改说明 #

• DefinePlugin配置修正：之前直接写process: 'process'会导致Webpack把代码中的process替换成字符串'process'，完全不符合预期。现在改为注入完整的process.env对象，同时用ProvidePlugin全局提供process的polyfill。
• resolve.fallback调整：把原来的process/browser: false改成指向实际的polyfill文件，让Webpack能找到process的实现。
• Electron配置修复：你原代码里的反引号导致配置失效，Electron的nodeIntegration没生效；补充contextIsolation: false是因为Electron高版本默认隔离渲染进程的Node环境，关闭后才能直接访问process对象。

验证 #

保存配置后重启开发服务：

npm run electron:serve

此时process is not defined的错误应该会消失。

内容的提问来源于stack exchange，提问作者mbayefall