mangotsing / vite-electron-quick Goto Github PK

View Code? Open in Web Editor NEW

155.0 6.0 25.0 484 KB

⚡️Starter template with Vite2 Vue3 and Electron 11.x /使用 Vite2 Vue3 以及 Electron 11.x 打造的快速启动模版。

License: MIT License

JavaScript 39.02% TypeScript 31.28% Vue 24.46% HTML 3.16% SCSS 1.97% Shell 0.11%

vite electron vite-vue3 vite-electron vue-router-next vitejs

vite-electron-quick's Introduction

vite-electron-quick

👻 A fast Simple Vite2 Vue3 and Electron 11.x template.

⚡️ If you want to fast create a Vite 2 + Vue 3 + Electron 11.x project:

🚀 Why not use this?

quick install


npx create-vite-electron <project_name>

yarn create vite-electron <project_name>

run

yarn
yarn dev
yarn build

change log

210331

Update rollup-plugin-esbuild version.

210219

resolve #6
change vite config file (alias => resolve.alias)
current version:
- vite 2.0.1
- electron 11.2.3

210113

fix Vite2 config bugs
vue-router next use hash mode instead of history mode

210108

use Vite2
use Electron 11.x

201029

fix build bug
if build slowly, you can use electron mirror

201026

vite update, update vite.config.ts file
add third lib element-plus import globally
please note when using NODE MODULE, may need to change vite.config.ts -> optimizeDeps.allowNodeBuiltins

原因

vite 的快速发展以及更新，让其他能与之配合的项目各显神通，为什么不来试一试呢？
vite 处于 beta 状态，目前还没有适合的脚手架与 electron 11.x 版本搭配使用
业务上原本使用的 electron-vue 框架，由于使用的 electron 以及 webpack 版本较低，升级很麻烦。于是计划使用新的方案探索可能性。
使用 electron 的业务，是为数不多可以不考虑兼容性的业务，能够在业务中使用最新的框架是不可多得的机会。

使用 3rd lib tips

第三方库都可能会与 vite 以及 electron 框架本身造成冲突，请谨慎选择。

vite-electron-quick's People

Contributors

Stargazers

Watchers

vite-electron-quick's Issues

打包出来有问题

Not allowed to load local resource: file:///C:/Users/Bo/Desktop/vite-electron-quick-master/vite-electron-quick-master/dist/win-unpacked/resources/app.asar/dist/render/index.html
之前vite1 打包出来没问题

3月14日问题

好像vite更新频繁 ……今天看dev 好像element-plus有问题注释之后可以运行electron 但是有Uncaught ReferenceError: require is not defined 错误



望大佬有空修复下

An update of rollup-build-plugin has just been launched and I had to update it manually because some methods are not supported by esbuild anymore and the version that comes in the preset does not work.

I had my app running with vite 1 with an old preset of vite-electron-quick and when I reinstalled the node_modules there were all kinds of problems, but I solved it by installing and adapting my code with a new npx create-vite-electron, up to this point everything is fine, dev mode works and when I build everything seems fine... but actually the app does not load some assets and components even when they exist in the unpacked directory.

These are the files that my app is triying to load in:

These are the failed and successful requests:

I have realized that the routes that fail are all relative and those that load are absolute:

Failing: file:///assets/duration.c3d062a9.js
Loading:file:///C:/Users/denyncrawford/Documents/proyectos/guillotine/dist/win-unpacked/resources/app/dist/render/assets/Auth.9a0064a5.js

Finally, here are some of my built assets and they are not even half, which are not being loaded in the view:

This is wat I get when I try to push a route that is not being loaded:

I think it has something to do with esbuild or @vue/compiler-rfc but I don't think it is this last one because I was using the same version before.

Versions:

rollup-plugin-esbuild: 3.0.0
vite: latest
@vue/compiler-sfc: 3.0.7
vue: 3.0.7
electron: ^11.0.0

创建成功后无法显示

你好，我使用 npx create-vite-electron ftv-pc创建成功后，系统运行正常。但是不显示内容，是啥原因导致。

安装的 serialport 模块在打包之后生成的 exe 文件报错，找不到模块

npm run dev 可以正常运行，并调用这个模块的功能， npm run build 后生成的 .exe 文件会出现如下情况

不能运行 dev

PS F:\stereo-camera> npm run dev

> [email protected] dev
> npm run dev:all


> [email protected] dev:all
> concurrently -n=vue,ele -c=green,blue "npm run dev:vue" "npm run dev:ele"

[vue] 
[vue] > [email protected] dev:vue
[vue] > vite
[vue]
[ele] 
[ele] > [email protected] dev:ele
[ele] > node script/build --env=development --watch
[ele]
[vue] events.js:292
[vue]       throw er; // Unhandled 'error' event
[vue]       ^
[vue]
[vue] Error: spawn F:\stereo-camera\node_modules\esbuild\esbuild.exe ENOENT
[vue]     at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
[vue]     at onErrorNT (internal/child_process.js:465:16)
[vue]     at processTicksAndRejections (internal/process/task_queues.js:80:21)
[vue] Emitted 'error' event on ChildProcess instance at:
[vue]     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[vue]     at onErrorNT (internal/child_process.js:465:16)
[vue]     at processTicksAndRejections (internal/process/task_queues.js:80:21) {
[vue]   errno: -4058,
[vue]   code: 'ENOENT',
[vue]   syscall: 'spawn F:\\stereo-camera\\node_modules\\esbuild\\esbuild.exe',
[vue]   path: 'F:\\stereo-camera\\node_modules\\esbuild\\esbuild.exe',
[vue]   spawnargs: [ '--service=0.9.4', '--ping' ]
[vue] }
[vue] npm ERR! code 1
[vue] npm ERR! path F:\stereo-camera
[vue] npm ERR! command failed
[vue] npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c vite
[vue] 
[vue] npm ERR! A complete log of this run can be found in:
[vue] npm ERR!     C:\Users\Cery\AppData\Local\npm-cache\_logs\2021-03-19T15_33_00_423Z-debug.log
[vue] npm run dev:vue exited with code 1
[ele] Error: Timed out waiting for: http://localhost:8889/index.html
[ele]     at MergeMapSubscriber.project (F:\stereo-camera\node_modules\wait-on\lib\wait-on.js:132:31)
[ele]     at MergeMapSubscriber._tryNext (F:\stereo-camera\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
[ele]     at MergeMapSubscriber._next (F:\stereo-camera\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
[ele]     at MergeMapSubscriber.Subscriber.next (F:\stereo-camera\node_modules\rxjs\internal\Subscriber.js:66:18)
[ele]     at AsyncAction.dispatch (F:\stereo-camera\node_modules\rxjs\internal\observable\timer.js:31:16)
[ele]     at AsyncAction._execute (F:\stereo-camera\node_modules\rxjs\internal\scheduler\AsyncAction.js:71:18)
[ele]     at AsyncAction.execute (F:\stereo-camera\node_modules\rxjs\internal\scheduler\AsyncAction.js:59:26)
[ele]     at AsyncScheduler.flush (F:\stereo-camera\node_modules\rxjs\internal\scheduler\AsyncScheduler.js:52:32)
[ele]     at listOnTimeout (internal/timers.js:554:17)
[ele]     at processTimers (internal/timers.js:497:7)
[ele] npm ERR! code 1
[ele] npm ERR! path F:\stereo-camera
[ele] npm ERR! command failed
[ele] npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node script/build --env=development --watch
[ele] 
[ele] npm ERR! A complete log of this run can be found in:
[ele] npm ERR!     C:\Users\Cery\AppData\Local\npm-cache\_logs\2021-03-19T15_33_05_739Z-debug.log
[ele] npm run dev:ele exited with code 1
npm ERR! code 1
npm ERR! path F:\stereo-camera
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c concurrently -n=vue,ele -c=green,blue "npm run dev:vue" "npm run dev:ele"

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Cery\AppData\Local\npm-cache\_logs\2021-03-19T15_33_05_819Z-debug.log
npm ERR! code 1
npm ERR! path F:\stereo-camera
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c npm run dev:all

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Cery\AppData\Local\npm-cache\_logs\2021-03-19T15_33_05_870Z-debug.log

下面是log ，求助！

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Users\\Cery\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'run',
0 verbose cli   'dev:vue'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:C:\Users\Cery\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 2ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:F:\stereo-camera\.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:F:\cadence_workspace\.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:C:\Users\Cery\AppData\Roaming\npm\etc\npmrc Completed in 1ms
13 timing config:load:global Completed in 1ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 2ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 11ms
19 verbose npm-session f9712d0d074830cd
20 timing npm:load Completed in 19ms
21 timing command:run Completed in 297ms
22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (C:\Users\Cery\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
22 verbose stack     at ChildProcess.emit (events.js:315:20)
22 verbose stack     at maybeClose (internal/child_process.js:1048:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
23 verbose pkgid [email protected]
24 verbose cwd F:\stereo-camera
25 verbose Windows_NT 10.0.19041
26 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Cery\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev:vue"
27 verbose node v14.16.0
28 verbose npm  v7.6.3
29 error code 1
30 error path F:\stereo-camera
31 error command failed
32 error command C:\WINDOWS\system32\cmd.exe /d /s /c vite
33 verbose exit 1

Thanks for using Element Plus 😘

Element Plus is still under heavy development. Feel free to ask us anything if needed.

https://github.com/element-plus/element-plus/issues/new

build 错误

A JavaScript error occurred in the main process

[vue] error when starting dev server:
[vue] Error: The following dependencies are imported but could not be resolved:
[vue] element-plus/lib/theme-chalk/index.css (imported by /home/golove/vite_electron/src/render/main.ts)
[vue] Are they installed?

ele] A JavaScript error occurred in the main process
[ele] Uncaught Exception:
[ele] TypeError: Cannot destructure property 'ANY' of 'require$$26' as it is undefined.

为什么在主进程（src/main/index.ts)里面访问不到图片？

为什么访问不到图片？在 src/main/index.ts 里面，使用 path.join + dirname 访问的是 dist 里面的图片，但是 dist 里面并没有这个图片，该怎么解决呢？

win10系统项目启动报错，应该是环境导致但是找i不到原因。。求助

require is not defined

我这里也用vite 和 vue + electron 搭了套环境

在vue组件中希望点击事件触发ipcRender.send

<script setup>
import TopBar from '@/components/layout/TopBar.vue'
import electron from 'electron' //  __dirname is not defined
const electron = require('electron') // require is not defined

</script>

nodeIntegration:true 开启了

这个Bug 困扰了我两天了。。