electron-vite / electron-vite-vue Goto Github PK

老哥我最近在整一个 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)

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

正常模式下使用require可以引用第三方包，但是在构建后并没有node_modules目录包含第三方模块，所以打包后启动报错。
请问有什么好的解决方法么？

build: {
      outDir: '../../dist/render',
      emptyOutDir: true,
      minify: false,
      commonjsOptions: {},
      sourcemap: true,
}

It's may not compatible with some plugins.
In those case outDir is relative to root.

已经参照Readme的说明，对packages/preload/index.ts与packages/renderer/src/global.d.ts进行了修改

packages/preload/index.ts

import { contextBridge, ipcRenderer, dialog } from 'electron';
...
contextBridge.exposeInMainWorld('dialog', dialog);

packages/renderer/src/global.d.ts

  interface Window {
    // Expose some Api through preload script
    fs: typeof import('fs');
    ipcRenderer: import('electron').IpcRenderer;
    dialog: import('electron').Dialog;
  }

然后在main.ts中console.log('dialog',window.dialog) 时，输出的是undefined

测试了Electron的其他Main Process API，比如Shell，clipboard等是没问题的。唯独这个dialog不行，这是为啥捏？

When I run "vue add vuetify” and choose "Vite-Preview", the cli says that it cannot find the file "/public/index.html".

[pre] @rollup/plugin-typescript TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

这个是什么问题，但不影响使用。

微信群再发一下呗，似乎过期了

该问题可能有关 Vite 本身，具体来说，我想在主进程中使用execa这个库，但该库不支持require，只支持import或者dynamic import。

• 当execa作为devDependencies时

  • 无论使用import还是dynamic import，npm run dev报错如下，程序无法启动：

    

• 当execa作为dependencies时

  • 若使用import，则import会被编译成require，执行时报错

  • 而dynamic import会被编译成如下语句：

    
    仍然在执行时报错：

    

我的项目结构如下，其中，index.ts引入了utils.ts，而我想在utils.ts中引入execa：

• main
  • index.ts
  • utils.ts
• preload
• renderer

另外，我的 Vite 版本为2.8.4，Electron版本为17.1.0，execa版本为6.1.0，均为打开本issue时的最新稳定版本，模板中的 Vite 配置文件我均未修改

使用示例，build之后，提示 [build-main.ts] Electron build...@rollup/plugin-typescript TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Hi!

My backend (express + ws) serves static vite3 app (fetch api + websockets).

Now I want make standalone solution with electron.

I want use your template as basis.

But I have many questions.

I think better use http over unix-sock instread of tcp but I don't sure renderer can interact with main process with unix+http:// protocol.

const socket = new WebSocket('unix+ws://tmp/sock')

Main idea is seamless support source code main project (web version) and standalone (elecron).

Or maybe use some of function electron

protocol.intercept... ('ws', (request, callback))

Do you understand what I mean?

这是我用vue-cli搭建的项目，配置vue.config.js中配置插件的external，不知道你这个项目中应该如何配置？

https://github.com/Minori-ty/vue-cli-vue3-electron-serialport.git

resolveElectron似乎在plugins中删掉也是可以正常调试和打包的。
想请教一下这个函数的意图和作用。
最近在学习electron相关技术，该项目让我受益匪浅，感谢作者

感谢作者精巧的demo~

是否有考虑支持多窗口？
我尝试创建一个新的窗口window2，window2.loadURL()和window2.loadFile()都尝过，但是不知道window2.html的文件该怎么和vite或者rollup绑定，以前基于webpack的是可以绑定多个入口的。不知道是否与目前vite的配置只支持一个入口的原因（https://github.com/vitejs/vite/issues/257有聊到）

用import会有代码提示，但是运行时会报错；用require正常，但是写代码的时候会失去代码提示。
import { chromium } from 'playwright' 运行时会报错
const { chromium } = require('playwright') 在开发的时候无代码提示
目前我的情况是这样的，十分致命，有什么好的方案吗

A folder with the variable is generated before the release folder is generated. It only contains the .icon-icns file.

https://github.com/caoxiemeihao/electron-vue-vite/blob/e522cf352d2c2d2fa4cae4c38e361e05997bd01d/configs/electron-builder.config.mjs#L9

请问下\src\renderer目录下的package.json.txt和tsconfig.json是不是无用的啊, 我把这两个文件拿出来也不影响dev和build

https://github.com/caoxiemeihao/electron-vue-vite/blob/7b32a5ff4c116131f4923e3b671de18955d5b9dd/src/renderer/package.json.txt#L1

https://github.com/caoxiemeihao/electron-vue-vite/blob/7b32a5ff4c116131f4923e3b671de18955d5b9dd/src/renderer/tsconfig.json#L1

tsconfig.json中compilerOptions.module换成esnext会报错

如果可以的话，非常感谢！

windicss

产生步骤

1. 下载本专案
2. 终端安装所有module npm i
3. 终端安装windicss npm i -D vite-plugin-windicss windicss
4. 配置windicss

configs/vite-renderer.config.ts

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

src/renderer/src/main.ts

import 'virtual:windi.css'

5. 终端执行 npm run build

错误讯息

$ npm run build

> [email protected] build
> vue-tsc --noEmit && node scripts/build.mjs && electron-builder

node_modules/windicss/types/utils/color.d.ts:1:28 - error TS2307: Cannot find module 'color-string' or its corresponding type declarations.

1 import type { Color } from 'color-string';
                             ~~~~~~~~~~~~~~


Found 1 error.

unplugin-vue-components

产生步骤

1. 下载本专案
2. 终端安装所有module npm i
3. 终端安装unplugin-vue-componentsnpm i -D ant-design-vue@next @vue/compiler-sfc unplugin-vue-components
4. 配置unplugin-vue-components
   configs/vite-renderer.config.ts

import Components from "unplugin-vue-components/vite"
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [AntDesignVueResolver()]
        })
    ],
......
})

5. 执行npm run build

错误讯息

$ npm run build

> [email protected] build
> vue-tsc --noEmit && node scripts/build.mjs && electron-builder

node_modules/@rollup/pluginutils/types/index.d.ts:2:26 - error TS2307: Cannot find module 'estree' or its corresponding type declarations.

2 import { BaseNode } from 'estree';
                           ~~~~~~~~

node_modules/unplugin/dist/index.d.ts:3:49 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

3 import { Compiler, WebpackPluginInstance } from 'webpack';
                                                  ~~~~~~~~~

node_modules/unplugin/dist/index.d.ts:4:45 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

4 export { Compiler as WebpackCompiler } from 'webpack';
                                              ~~~~~~~~~

node_modules/webpack-virtual-modules/lib/index.d.ts:1:31 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

1 import type { Compiler } from 'webpack';
                                ~~~~~~~~~


Found 4 errors.

如果略过ts检查 vue-tsc --noEmit 是可以正常build的；npm run dev本身不受影响；是哪边设置错误吗?

错误：Uncaught TypeError: path.join is not a function
报错的代码是electron依赖里的const pathFile = path.join(__dirname, 'path.txt');
我在vue中使用了node的原生api，是和这个有关系吗

1. What's the resolveElectron / What should you pay attention to with turning off nodeIntegration?
   什么是 resolveElectron？ 在关闭 nodeIntegration 时你应该注意什么？
   issue: #52

2. import pure esm in the main process
   在主进程引入esm需要注意的问题
   issue: #65

3. dependencies vs devDependencies
   dependencies 和 devDependencies 区别
   issue: #86

4. exports is not defined in renderer process
   exports is not defined 在渲染进程中出现的问题
   #103

Hi, this is Peter.

import { shell } from 'electron' // raises `__dirname is not defined` error.

const OnPayout = () => {
  shell.openExternal('https://url.com') // not working
}

import electron from 'electron' // same error

const OnButton = () => {
  electron.app.quit()
}

This issue is raised when I import electron package.

2. require is not allowed on vite framework.

const OnButton = () => {
  const electron = require('electron') // `require` is not defined.
}

3. inline importing

const OnButton = async () => {
  const electron = await import('electron') // also `__dirname is not defined`
}

How can I solved it?
Thanks!

如题，可以把preload变成ts写吗，在构建时编译preload

#我尝试着用configs目录来配置我原有代码的打包，但是打包出来的dist目录里没有packge.js，然后报错如下

我找了一下这个demo项目的文件，没有找到packge.json转package.js的代码。
我的项目目录：

其中src相当于renderer部分的代码，sys是electron相关。
配置文件configs/vite-src.config.js

配置文件configs/vite-sys.config.js

第一次写issue，如果没描述清楚我再补充啊

能不能发一个 .vscode/launch.json 呢

另外大家都是怎么调试的，还是只能打log方式？

谢谢

tsconfig.json中compilerOptions.module换成esnext会报错

我在使用 and-design 时控制台一直有报错,我不太清楚是哪里的问题

渲染进程使用node模块，vite里是怎么引入的

• 21-02-19 报错 https://github.com/ajv-validator/ajv/issues/1399

  Circular dependency: node_modules\conf\node_modules\ajv\dist\compile\validate\dataType.js -> node_modules\conf\node_modules\ajv\dist\compile\util.js -> node_modules\conf\node_modules\ajv\dist\compile\validate\index.js -> node_modules\conf\node_modules\ajv\dist\compile\validate\dataType.js

此错误是什么问题，我去掉 @rollup/plugin-json 这个插件，就一切正常。我不是很懂，能帮我解惑吗

When running npm run dev, this warning occurs:

It seems the line below cause this warning, because the warning disappears after commenting this line.
https://github.com/caoxiemeihao/electron-vue-vite/blob/b9afc0fdfc0f441e3ce905f9e6a1f29f7823b956/packages/preload/vite.config.ts#L14
And I also notice this line was added in a recent commit.

我想请问下楼主 为啥 我拉下来 npm i 然后 npm run dev 的时候就报错了

console.log(minimist); ---> undefined

[pre] C:\Users\LZY\Desktop\react-vite\script\build-preload.ts:10
[pre] const argv = minimist(process.argv.slice(2))
[pre] ^
[pre] TypeError: minimist_1.default is not a function
[pre] at Object. (C:\Users\LZY\Desktop\react-vite\script\build-preload.ts:10:22)
[pre] at Module._compile (node:internal/modules/cjs/loader:1092:14)
[pre] at Module.m._compile (C:\Users\LZY\Desktop\react-vite\node_modules\ts-node\src\index.ts:1056:23)
[pre] at Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
[pre] at Object.require.extensions. [as .ts] (C:\Users\LZY\Desktop\react-vite\node_modules\ts-node\src\index.ts:1059:12)
[pre] at Module.load (node:internal/modules/cjs/loader:972:32)
[pre] at Function.Module._load (node:internal/modules/cjs/loader:813:14)
[pre] at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
[pre] at node:internal/main/run_main_module:17:47

这是为什么 我啥都没有改你的

readme 里面gitclone 应该改成 https 而不是ssh

代码拉下来后，没有更改启动开发环境的相关配置。
渲染层js更改后，vite热更新触发，主进程向渲染层通讯，渲染层会打印多次信息
使用自带的菜单 View -> Reload 渲染层重新加载后信息打印恢复正常

举例，主进程只发送了一次消息给渲染层，然后在渲染层 devTools 打印了多次信息

运行
npm run build

类似webpack中也会出现的问题
webpack/webpack#1019
那vite请教下要怎么修复呢

我用你的项目，作为框架，增加了一些python脚本的调用，使用build打包mac后，打开白屏，查看原因是找不到路径，另外我的asar也没法把生成的app.asar解压

有三种方案,不知道大佬推荐用哪一种

在preload中使用contextBridge,然后传递给渲染进程

使用netapi,request库或者fetch

//使用fetch,然后渲染进程使用window.getData.request(url);
contextBridge.exposeInMainWorld("getData", {
  async request(url: RequestInfo, init: RequestInit) {
    const res = await fetch(url, init);
    return await res.json();
  },
});

//使用electron的netapi
 const request = net.request('https://github.com')

  request.on('response', (response) => {
    console.log(`STATUS: ${response.statusCode}`)
    console.log(`HEADERS: ${JSON.stringify(response.headers)}`)

    response.on('data', (chunk) => {
      console.log(`BODY: ${chunk}`)
    })

    response.on('end', () => {
      console.log('No more data in the response.')
    })
  })

  request.end()

在渲染进程使用类似axios,fetch的请求库

这个方法会有跨域的问题

onMounted(() => {
  fetch('http://api.com/get').then((json) => {
    return json.json();
  }).then((data ) => {
    handle(data)
  })
})

使用ipc通信

//在主线程
ipcMain.handle('FETCH_DATA', async (event, param) => {
  try {
    if (param === 'proxy') {
      await fetchDataByProxy()
    } else {
      await fetchData(param)
    }
    return {
      dataMap,
      current: config.current
    }
  } catch (e) {
    sendMsg(e, 'ERROR')
    console.error(e)
  }
  return false
})
//渲染进程
	const fetchData = async (url) => {
  state.status = 'loading'
  const data = await ipcRenderer.invoke('FETCH_DATA', url)
  if (data) {
    state.dataMap = data.dataMap
    state.current = data.current
    state.status = 'loaded'
  } else {
    state.status = 'failed'
  }
}

我现在用的第一种方法,不知道大佬推荐用哪一种方法?也许可以在模板里写个例子?

桌面应用刷新时， new Store({ name: 'electron-vue' }) 会阻塞应用的重新载入。去除这个加载也会快很多，具体原因我没有找到

您好，更新到最新发现webgl项目很卡了呢。

[.WebGL-0000742A009A7800]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels

请问知道咋回事不- -，我之前也用了这个模板，没这个问题的。

https://github.com/zouyaoji/vue-cesium-electron-vite-starter

• 无法正确调用electron的方法
• 
• 以下调用都会报错
• 

我最近开发的项目用到了全套electron和ts vite这套东西,我自己ts没怎么用过, 进展太慢, 所以借鉴了你的项目...
但是遇到一个问题, 我按照vue3官方设置全局方法 (app.config.globalProperties), 在这个项目中不生效....是因为目录的问题需要做什么配置吗....

首先是界面不会变，无论改什么文件。

其次，developer tools 也是全部空白

请问是怎么回事呢

为什么package.json里面asar设为true后，打包完运行报错？
如何使用asar呢

最终打包大小有300多M，正常初始大小应该只有现在的一半， src/render视图中的依赖不应该也一起打包了

打包web端部署 服务器 提示