What did I do

renderer vite.config.ts

// 这个位置, 按你的样例更新了原先的脚手架
// import electron from 'vite-plugin-electron/renderer' 0.2.1
    plugins: [
        vue(),
        electron(),
        resolve(
            /**
             * Here you can specify other modules
             * 🚧 You have to make sure that your module is in `dependencies` and not in the` devDependencies`,
             *    which will ensure that the electron-builder can package it correctly
             */
            {
                // If you use electron-store, this will work
               // 'electron-store': 'const Store = require("electron-store"); export default Store;',
            }
        ),
    ],

// 原来是
    plugins: [
        vue(),
        resolveElectron(
            /**
             * Here you can specify other modules
             * 🚧 You have to make sure that your module is in `dependencies` and not in the` devDependencies`,
             *    which will ensure that the electron-builder can package it correctly
             * @example
             * {
             *   'electron-store': 'const Store = require("electron-store"); export default Store;',
             * }
             */
        ),
    ], 

/**
 * For usage of Electron and NodeJS APIs in the Renderer process
 * @see https://github.com/caoxiemeihao/electron-vue-vite/issues/52
 */
export function resolveElectron(
    resolves: Parameters<typeof resolve>[0] = {}
): Plugin {
    const builtins = builtinModules.filter((t) => !t.startsWith('_'))

    /**
     * @see https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/resolve#readme
     */
    return resolve({
        electron: electronExport(),
        ...builtinModulesExport(builtins),
        ...resolves,
    })

    function electronExport() {
        return `
/**
 * For all exported modules see https://www.electronjs.org/docs/latest/api/clipboard -> Renderer Process Modules
 */
const electron = require("electron");
const {
  clipboard,
  nativeImage,
  shell,
  contextBridge,
  crashReporter,
  ipcRenderer,
  webFrame,
  desktopCapturer,
  deprecate,
} = electron;

export {
  electron as default,
  clipboard,
  nativeImage,
  shell,
  contextBridge,
  crashReporter,
  ipcRenderer,
  webFrame,
  desktopCapturer,
  deprecate,
}
`
    }

    function builtinModulesExport(modules: string[]) {
        return modules
            .map((moduleId) => {
                const nodeModule = require(moduleId)
                const requireModule = `const M = require("${moduleId}");`
                const exportDefault = `export default M;`
                const exportMembers =
                    Object.keys(nodeModule)
                        .map((attr) => `export const ${attr} = M.${attr}`)
                        .join(';\n') + ';'
                const nodeModuleCode = `
${requireModule}

${exportDefault}

${exportMembers}
`

                return {[moduleId]: nodeModuleCode}
            })
            .reduce((memo, item) => Object.assign(memo, item), {})
    }
}

// 这里没去动它, 因为我希望运行环境保持隔离
    webPreferences: {
      preload: join(__dirname, '../preload/index.cjs'),
      nodeIntegration: true,// 使用false
      contextIsolation: false, // 使用true
    },

What happened

直接按你当前脚手架的配置, dev是没有问题的, 但是打包之后, 入口文件就会出现 exports is not defined 似乎是什么模块没有正确打包

Expected

我不确定这是不是一个BUG, 或者说使用'vite-plugin-electron/renderer'时还需要一些额外的配置, 看了源码, 好像也没什么需要配置的, 旧脚手架里的export function resolveElectron 内的方法也被你拆分到vite-plugin-electron中了

Environment

• OS: macOS 12.3.1 / windows11
• electron-vue-vite version (or commit hash), e.g. v1.0.0

More detail

// import resolve from 'vite-plugin-resolve' 2.0.1
// 目前我是去掉'vite-plugin-electron/renderer'
// 按之前旧版本脚手架的 builtinModulesExport 和 electronExport 修改后使用, 这样做可以正常打包运行
    plugins: [
        vue(),
        resolve({
            electron: electronExport(), // 
            ...builtinModulesExport()
        }),
    ],

Describe the problem you Confuse

Hey there, I'm currently trying to port an existing application over to this template and running into an issue where the content won't load.

[plugin:vite:import-analysis] Failed to resolve import "${moduleName}" from "node_modules/@electron/remote/dist/src/main/server.js?v=b01c5d3c". Does the file exist?
/home/stan/projects/personal/WeakAurasCompanion/node_modules/@electron/remote/dist/src/main/server.js:11:45
9  |  import * as __require_for_vite_LxV6Rj from "../common/get-electron-binding";
10 |  import * as __require_for_vite_gQPFem from "@electron/remote/main";
11 |  import * as __require_for_vite_GEtNgH from "${moduleName}";
   |                                              ^
12 |  import * as __require_for_vite_lMpJfA from "${moduleName}";
13 |  import * as __require_for_vite_lJsWyZ from "electron";
    at formatError (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:39055:46)
    at TransformContext.error (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:39051:19)
    at normalizeUrl (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:58329:26)
    at async TransformContext.transform (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:58478:57)
    at async Object.transform (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:39292:30)
    at async doTransform (/home/stan/projects/personal/WeakAurasCompanion/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50012:29

The code is in this branch here https://github.com/WeakAuras/WeakAuras-Companion/tree/v5

Any hint or help would be appreciated :)

More detail (optional)

Add any other context or screenshots.

如题，在使用这新版的template时，axios我依照readme安装到devDependencies了，但是在electron/main下会报错。

(node:23156) UnhandledPromiseRejectionWarning: ReferenceError: XMLHttpRequest is not defined

另外请教要在设定环境变数时，同样在electron/main下要如何设定?看起来vite没有使用到.env的设定，这部分我用dotenv安裝到dependencies是可行的

大佬您好，想请教一下题述问题

我关闭了nodeIntegration，想在主进程中使用worker_threads的Worker创建子线程service/index.ts，但是不知如何配置vite才能不打包进main.ts

目录结构

\---electron
    |   main.ts
    |
    +---preload
    |       index.ts
    |
    \---service
            index.ts

main.ts

import { Worker } from 'worker_threads'
const threadService = new Worker('./service/index.ts')

vite.config.ts

export default defineConfig({
  ...
  plugins: [
    ...
    electron({
      main: {
        entry: 'electron/main.ts',
        vite: {
          build: {
            // For Debug
            sourcemap: true,
            outDir: 'dist/electron/main'
          },
          // Will start Electron via VSCode Debug
          plugins: [process.env.VSCODE_DEBUG ? onstart() : null]
        }
      },
      preload: {
        input: {
          // You can configure multiple preload here
          index: join(__dirname, 'electron/preload/index.ts')
        },
        vite: {
          build: {
            // For Debug
            sourcemap: 'inline',
            outDir: 'dist/electron/preload'
          }
        }
      }
    }),
    ...
  ],
  ...
})

目前在用electron-vite-vue重构之前的一个项目，其中有引入一个包 league-connect 其中有一个方法会创建一个websocket监听，在我之前的项目中是可以正常使用的。 但我在主进程中创建时，总是失效，debug后发现是其中的ws库抛出了个错误：ws does not work in the browser 这个是我从未见过的错误。 我查询资料后，在这里，似乎可以了解到，这个方法中调到ws库后，被识别成在渲染进程中执行。 但我是在主进程中运行的，是否是我vite的配置有缺少，麻烦大大解答。

// main.ts
app.whenReady().then(async () => {
  await initApp()
  const credentials = appConfig.get<any>('credentials');
  const r = await createWebSocketConnection(credentials);
  console.log(r);  
  app.on('activate', async () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      mainWindow = await createMainWindow(preload)
    }
  })
})

// vite.config.ts
electron({
      main: {
        entry: 'app/main/index.ts',
        vite: withDebug({
          build: {
            outDir: 'dist/app/main',
          },
        }),
      },
      preload: {
        input: {
          // You can configure multiple preload here
          index: join(__dirname, 'app/preload/index.ts'),
        },
        vite: {
          build: {
            // For Debug
            sourcemap: 'inline',
            outDir: 'dist/app/preload',
          },
        },
      },
      renderer: {
        resolve() {
          return ['electron-store','league-connect']
        },
      },
    }),
    renderer({
      resolve() {
        return ['getmac','league-connect']
      }
    })
  ],

Describe the bug

将打包时产生的 electron-vite-vue\release\2.1.0\win-unpacked\resources\app.asar

复制到electron官方的resources目录远行是空白的

将default_app.asar删除，再远行也是一样的

请问这个要怎么解决，还是说不支持这种方式，早期的版本应该是可行的 我想在Win上打包给Mac用户使用，所以测试了这种方式，而我没有Mac，如果这样不可行的话，就很不方便

老哥我最近在整一个 vue + electron 项目，搭项目框架的时候参考了这个项目不少代码，但是在配置 vue3 devtools 的碰到一些问题。 第一个是使用 electron-devtools-installer 加载 vue3 devtools 时会有下面的警告：

(node:39242) ExtensionLoadWarning: Warnings loading extension at /Users/yutengjing/Library/Application Support/app/extensions/ljjemllljcmogpfapbkkighbhhppjdbg:
  Unrecognized manifest key 'browser_action'.
  Unrecognized manifest key 'update_url'.
  Permission 'contextMenus' is unknown or URL pattern is malformed.
  Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

(Use `Electron --trace-warnings ...` to show where the warning was created)

第二个是打开 vue devtools tab 和 electron app 后点击窗口，控制台报错：

[39242:0715/170333.702784:ERROR:CONSOLE(2)] "Uncaught (in promise) TypeError: chrome.tabs.captureVisibleTab is not a function", source: chrome-extension://onimmhnncoodiojfaeonajhfdipemkoi/build/devtools.js (2)

不知道你有没有碰到过这些问题。

Description

This PR is aimed to improve the template by updating the template to follow the official Vite + Vue + TS template strictly and also upgrade dependencies.

Change list

• Properly use the template that Vite + Vue + TS provided
• Update dependencies
• Update CI
• Update launch.json
• Switch node icon to official svg
• Add "node:" prefix to package
• Add one more example of electron working in bowser
• Fix #322

What is the purpose of this pull request?

• [X] Bug fix
• [X] New Feature
• [X] Documentation update
• [X] Other

在template的eletron资料夹下，不论是在main或是preload额外建立ts档案引用时，编译都会显示错误
例如在preload建立test.ts，并引用到preload/index.ts中，显示错误：

error TS6305: Output file 'PROJECT_PATH/electron-vite-vue/electron/preload/test.d.ts' has not been built from source file 'PROJECT_PATH/electron-vite-vue/electron/preload/test.ts'.
  The file is in the program because:
    Matched by include pattern '**/*' in 'PROJECT_PATH/electron-vite-vue/tsconfig.json'

在架构上是只能用单一index.ts档案吗?

另外请教在渲染进程如果需要取得专案位置，有什么好取法呢? 目前是取process.env.PWD

先是直接打包，出现 exports 未定义 Uncaught ReferenceError: exports is not defined

尝试了 issue 中的解决方案，vite 配置里改为

rollupOptions: {
  output: {
      format: 'es'
  }
}

打包后不报没找到 exports 但是报了 Uncaught TypeError: Failed to resolve module specifier "fs/promises".

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "dist/main/index.cjs",
  "author": "TaurusXin",
  "license": "MIT",
  "scripts": {
    "dev": "node scripts/watch.mjs",
    "prebuild": "vue-tsc --noEmit --p packages/renderer/tsconfig.json && node scripts/build.mjs",
    "build": "electron-builder",
    "init": "git config core.hooksPath .git/hooks/ && rm -rf .git/hooks && npx simple-git-hooks",
    "test:e2e": "npx playwright test",
    "test:e2e:headless": "npx playwright test --headed"
  },
  "engines": {
    "node": ">=14.17.0"
  },
  "devDependencies": {
    "@playwright/test": "^1.20.2",
    "@vitejs/plugin-vue": "^2.1.0",
    "ant-design-vue": "^3.2.1",
    "electron": "18.0.2",
    "electron-builder": "^23.0.3",
    "nano-staged": "^0.6.0",
    "simple-git-hooks": "^2.7.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.1",
    "vite-plugin-electron": "^0.4.2",
    "vite-plugin-resolve": "^2.0.1",
    "vue": "^3.2.31",
    "vue-router": "^4.0.14",
    "vue-tsc": "^0.31.1"
  },
  "env": {
    "VITE_DEV_SERVER_HOST": "127.0.0.1",
    "VITE_DEV_SERVER_PORT": 3344
  },
  "keywords": [
    "electron",
    "rollup",
    "vite",
    "vue3",
    "vue"
  ]
}

Node 版本：16.14.2

I want to use electron-store in node and web.

I can use electron-store in dev, but getting an error in prod.

When I import it this way

renderer: {
      resolve() {
        return ['electron-store']
      }
   }

dependencies: {
   "electron-store": "^8.1.0"
}

I got an error in prod:

when I import it this way

renderer: {
      resolve() {
        return ['electron-store']
      }
   }

devDependencies: {
   "electron-store": "^8.1.0"
}

I got an error in prod: Cannot find module 'electron-store'

Describe the bug

在使用 “npm create electron-vite” 命令创建完成项目后，安装完成依赖并且执行 "npn run dev" 会提示： After using the "npm create electron-vite" command to create the project, install the dependencies and execute "npn run dev" will prompt:

objc[75357]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x238a7f2e0) and /Users/xxxx/Documents/Softwar/Learn and Test/electron-vite-vue/node_modules/electron/dist/Electron.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib (0x111af3f38). One of the two will be used. Which one is undefined.

MAC: M1 MAC OS: 13.0.1 node: 18.12 npm: 8.19.2

I have created a project using the instructions in the README.md of the repo.

npm create electron-vite
cd electron-vite-vue/
npm i

After installing the dependencies I run npm run dev, and the app worked with no problem. I have tried to package it running npm run build and after the process of packaging I opened the electron-vue-vite file in linux-unpacked:

And I get a black screen with this error in the console.

Not allowed to load local resource: file:///home/oussama/Desktop/new/electron-vite-vue/dist/linux-unpacked/resources/app.asar/dist/index.html

I have the same problem (blank screen and nothing working) with another project that I packaged for Windows with a docker image.

Please can someone help me to fix this? I could share more if necessary.

我之前使用过Vue CLI Plugin Electron Builder和electron-react-boilerplate这些样板都有preload.js/ts，里面都是用contextBridge, ipcRenderer这两个函数去“注入”函数。

但是，此项目的electron/preload/index.ts里面的内容让我和不解，都是运行在浏览器端代码，甚至还有css代码。真正的preload代码好像在src/samples/node-api.ts。但是，src目录不就是渲染进程吗？怎么又出现了proload代码？而且，居然在src/main.ts引入了。这node代码和渲染进程代码混了吧。

我没有看懂这个preload逻辑，作者或者哪位热心人可以讲解一下？十分感谢🙏

问题描述

electron的主进程中需要执行npm publish自动发包任务，本地开发环境时，由于使用了命令行的PATH，可以执行child_process.spawn("npm publish") 。但build之后此时的PATH是/usr/bin:/bin:/usr/sbin:/sbin，我的npm命令不在这个下面导致报错。

Command failed: cd /var/folders/rl/09xrnhwn6_5cp6mj709v_h_c0000gn/T/my_tmp && npm publish /bin/sh: npm: command not found

系统：M1 macos 12.6
node: v18.5.0
npm: 8.12.1
node bin location = /Users/viki/.nvm/versions/node/v18.5.0/bin/node

尝试将npm i npm安装到node_modules中，在main process中require('npm') 也没有效果

请问下可以怎么把npm包打包进app里面，build之后可以直接使用?

npm-command-not-found-when-executing-commands-in-electron-app

参考了上面的方法也没用