caoxiemeihao / electron-vite-boilerplate Goto Github PK
View Code? Open in Web Editor NEW📚 Really simple Electron + Vite boilerplate.
License: MIT License
📚 Really simple Electron + Vite boilerplate.
License: MIT License
操作系统:win10
IDE:vscode
开发环境下能够正常渲染并且正常展示 HelloWorld.vue,但 build 后启动构建好的 exe 控制台报错:
Uncaught TypeError: Cannot read property 'render' of undefined
at Object.app.mount (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1337)
at eval (webpack-internal:///./src/render/main.ts:21)
at Object../src/render/main.ts (main.0028487d3.js:59)
at __webpack_require__ (main.0028487d3.js:222)
at main.0028487d3.js:306
at main.0028487d3.js:308
如果仅使用 vue3 开发,不使用 jsx 语法,期望能够正确构建,暂时不清楚哪里导致的错误
我使用 VSCode
的时候,在 tsconfig.json
文件中会有提示错误。
Cannot write file 'xxxx/electron-vite-boilerplate/dist/main/index.cjs' because it would overwrite input file. #ts [Ln 1, Col 1]
我尝试查找了一下原因,找到了这个说法: 当我使用 javascript
文件时,为什么我会得到 error ts5055 cannot write file xxx js because it would overwrite input file
错误?
对于
TypeScript
文件来说,在默认情况下,编译器将在同一目录中生成与JavaScript
相同文件名的文件。因为TypeScript
文件与编译后的文件总是拥有不同的后缀,这么做是安全的。然而,如果你设置allowJs
编译选项为true
和没有设置任何的编译输出属性(outFile
和outDir
),编译器将会尝试使用相同的规则来编译文件,这将导致发出的JavaScript
文件与源文件具有相同的文件名。为了避免意外覆盖源文件,编译器将会发出此警告,并跳过编写输出文件。有多种方法可以解决此问题,但所有这些方法都涉及配置编译器选项,因此建议你在项目根目录中的
tsconfig.json
文件来启用此功能。如果你不想编译JavaScript
文件,你只需要将allowJs
选项设置为false
;如果你确实想要包含和编译这些JavaScript
文件,你应该设置outDir
或者outFile
选项,定向到其他位置,这样他们就不会与源文件冲突。如果你仅仅是想包含这些JavaScript
文件,但是不需要编译,设置noEmit
选项为true
可以跳过编译检查。
可以看出,样版中的 tsconfig.json
将 allowJs
选项设置为 true
,但是没有设置 outDir
或者 outFile
选项,造成了这个报错,但是我不太了解这里应该怎么指定不同的编译路径以避免这个问题。
[Help] 如何设置环境变量呢?
如:process.env.TEST
serialport更改
https://serialport.io/docs/guide-upgrade
Hi, i'm new in electron, is there any way to get the import { systemPreferences } from 'electron' and use this function in a vue component?
使用了svg-sprite-loader在webpack打包,svg图标没了....
配置如下
{
test: /.svg$/,
loader: "svg-sprite-loader",
// include: [resolveRoot("src/render/assets/svg")],
options: {
symbolId: "icon-[name]",
},
},
"dependencies": {
"execa": "^6.1.0",
"file-type": "^17.1.1",
"move-file": "^3.0.0",
"node-fetch": "^3.2.4"
},
esmodule([
'execa',
'node-fetch',
'file-type',
'move-file',
]),
[⚡️ Vite] Error [ERR_REQUIRE_ESM]: require() of ES Module E:\FrontendProjects\MeiTuanAdmin\node_modules\execa\index.js from E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js not supported.
[⚡️ Vite] Instead change the require of E:\FrontendProjects\MeiTuanAdmin\node_modules\execa\index.js in E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js to a dynamic import() which is available in all CommonJS modulees.
[⚡️ Vite] at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite] at Module.<anonymous> (E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js:8:13)
[⚡️ Vite] at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite] at loadApplicationPackage (E:\FrontendProjects\MeiTuanAdmin\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
[⚡️ Vite] at Object.<anonymous> (E:\FrontendProjects\MeiTuanAdmin\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
[⚡️ Vite] at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite] at Object.<anonymous> (node:electron/js2c/browser_init:185:3104)
[⚡️ Vite] at ./lib/browser/init.ts (node:electron/js2c/browser_init:185:3308)
[⚡️ Vite] at __webpack_require__ (node:electron/js2c/browser_init:1:128)
[⚡️ Vite] at node:electron/js2c/browser_init:1:1200
[⚡️ Vite] at node:electron/js2c/browser_init:1:1267
[⚡️ Vite] at c._load (node:electron/js2c/asar_bundle:5:13343)
With this set up, is it possible to share type between main and renderer folder?
这个仓库我看到有 script ,所以我尝试用这个在 vscode 中 debug,但是提示 The task 'start.debug.script.mjs' cannot be tracked. Make sure to have a problem matcher defined.
但是成功显示了 electron 界面如图所示:
看起来和 readme 的图片一致。
这里我选择了 Debug Anyway
,会让 electron 窗口再出现相同的一个。
我不确定这是否正常,应该默认选择什么选项吗?或者应该设置什么去解决这个弹窗吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.