electron-vue 项目结构深度解析单一 package.json、双进程目录与构建产物布局【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue导读对于使用 electron-vue 脚手架搭建 Electron Vue.js 应用的开发者而言理解项目的目录与文件组织方式是正确编写业务代码、配置构建与发布产物的第一步。本文以 docs/ja/project_structure.md 为骨架结合仓库内 template/ 下的真实模板源码系统讲解 electron-vue 的依赖管理策略单一package.json、main进程的入口文件分工、渲染进程的目录约定以及从开发态到生产态app.asar的产物结构变化。读完本文你将能准确判断某个模块该装进dependencies还是devDependencies清楚src/main/index.js与src/main/index.dev.js各自职责并明白__dirname在生产环境下的行为差异。一、总体结构与 vuejs-templates/webpack 一脉相承electron-vue 的模板结构对使用过官方vuejs-templates/webpack的开发者来说并不陌生二者在整体组织思路上高度相似都通过vue-cli脚手架生成都包含src/、static/、test/、build/或等价构建脚本目录等标准目录。差异在于 Electron 应用特有的「双进程」模型导致src/下被划分为main/与renderer/两个子目录分别对应主进程与渲染进程的代码。从 template/ 模板可以看到脚手架生成后的开发期目录骨架部分文件/目录会因脚手架交互选项而异my-project ├─ .electron-vue/ # 构建与开发脚本dev-runner.js、webpack.*.config.js 等 ├─ build/ │ └─ icons/ # 应用图标 ├─ dist/ │ ├─ electron/ # 主进程与渲染进程打包输出 │ └─ web/ # 可选的 web 输出 ├─ node_modules/ ├─ src/ │ ├─ main/ │ │ ├─ index.dev.js # 仅开发期使用安装调试工具 │ │ └─ index.js # 主进程入口生产构建的 webpack entry │ ├─ renderer/ │ │ ├─ components/ # Vue 组件 │ │ ├─ router/ # vue-router 配置 │ │ ├─ store/ # vuex 配置 │ │ ├─ App.vue │ │ └─ main.js # 渲染进程Vue 应用入口 │ └─ index.ejs # HTML 模板 ├─ static/ # 静态资源构建时拷贝 ├─ test/ │ ├─ e2e/ # Spectron 端到端测试 │ └─ unit/ # Karma 单元测试 ├─ package.json └─ README.md该目录树的具体形态可参见 docs/ja/file-tree.md 的英文版本 docs/en/file-tree.md。其中.electron-vue/目录集中了开发与构建相关的脚本与配置而dist/electron/是最终打包前 webpack 的输出目录。二、单一package.json依赖管理2.1 为什么可以只用一个package.json在 Electron 应用开发早期主进程依赖与渲染进程依赖常常需要拆分成两个package.json来管理以保证打包时只携带运行所需的模块。得益于 electron-userland 组织的努力electron-packager与electron-builder如今都已完整支持单一package.json设置开发者只需维护根目录这一个清单文件打包工具会自动区分哪些依赖需要进入最终产物。从 template/package.json 可以看出模板在main字段中声明了./dist/electron/main.js这正是 Electron 启动时寻找的入口脚手架{{ }}形式的占位符会根据用户在vue init时的选择打包器用electron-builder还是electron-packager、是否启用 eslint、单元测试、e2e 测试、sass 等动态生成不同的scripts与依赖列表。2.2dependencies会被打进生产应用的运行时依赖dependencies中的模块会被包含进最终的正式应用。凡是应用运行时所必需的模块例如 Vue 本身、axios 等插件都应安装在这里。模板默认将vue置于该区段dependencies: { vue: ^2.5.16 }打包工具尤其是electron-builder会把dependencies视为「运行时依赖」随应用一并分发。判断标准很简单如果应用缺少这个模块就无法工作就放进dependencies。2.3devDependencies仅开发/构建期使用devDependencies中的模块不会被包含进最终的正式应用。它们服务于开发与构建环节例如构建脚本、webpack加载器、linter、测试框架等。查看 template/package.json 的devDependencies区段可以看到典型清单构建工具webpack、webpack-cli、webpack-merge、babel-core、babel-loader、babel-preset-env、vue-loader、vue-template-compiler、css-loader、style-loader、url-loader、file-loader等开发服务器webpack-dev-server、webpack-hot-middleware配合npm run dev的热更新流程代码质量eslint、babel-eslint、eslint-loader等仅在启用 eslint 选项时生成测试karma、mocha、chai、spectrone2e等按选项按需生成Electron 本体electron、electron-debug、electron-devtools-installer、devtron以及打包器electron-builder或electron-packagerelectron-rebuild。同时模板提供了一组与构建/开发直接对应的 npm scripts见 template/package.json 的scripts区段dev: node .electron-vue/dev-runner.js, build: node .electron-vue/build.js electron-builder, build:dir: node .electron-vue/build.js electron-builder --dir, build:clean: cross-env BUILD_TARGETclean node .electron-vue/build.js, build:web: cross-env BUILD_TARGETweb node .electron-vue/build.js, pack: npm run pack:main npm run pack:renderer, pack:main: cross-env NODE_ENVproduction webpack --progress --colors --config .electron-vue/webpack.main.config.js, pack:renderer: cross-env NODE_ENVproduction webpack --progress --colors --config .electron-vue/webpack.renderer.config.js若选择electron-packager作为打包器build会替换为node .electron-vue/build.js并额外生成build:darwin/build:linux/build:win32/build:mas等按平台构建的脚本。2.4 原生 NPM 模块需要针对 Electron 重新编译Electron 使用的 Node 版本与系统 Node 的 ABI 不一定一致因此原生nativenpm 模块必须针对 Electron 版本重新构建否则运行时会出现 ABI 不匹配的错误。官方推荐的两种途径使用electron-rebuild手动执行重建选择electron-packager方案时模板会将其列入devDependencies更简单的方式是直接使用electron-builder作为构建工具——它会在打包流程中自动处理原生模块的下载、编译与链接等繁琐任务。从 template/package.json 可以看到模板按打包器选项二选一electron-packager分支依赖electron-rebuild^1.8.1而electron-builder分支依赖electron-builder^20.19.2。这也印证了文档的结论如果不想手工处理原生模块的构建细节优先选择electron-builder。三、main进程入口文件的分工3.1src/main/index.js应用真正的入口src/main/index.js是应用的主文件是 Electron 启动时加载的脚本也是生产构建时 webpack 的入口文件。所有主进程逻辑都从这里开始。从 template/src/main/index.js 可以看到模板实现的核心骨架引入app与BrowserWindow在app.on(ready)时调用createWindow()创建窗口根据环境选择加载路径开发期加载http://localhost:9080由 dev-runner 启动的 webpack dev server生产期加载file://${__dirname}/index.html处理window-all-closed与activate生命周期事件macOS 平台下点击 Dock 图标重新创建窗口在非开发环境下设置global.__static指向static/目录若选用electron-builder模板还会预留一段被注释的electron-updater自动更新示例代码。对应的package.json中main: ./dist/electron/main.js指向的正是 webpack 将src/main/index.js打包后的产物。3.2src/main/index.dev.js仅开发期存在的辅助入口开发期间你会注意到src/main/index.dev.js这个文件。它专门服务于开发环境核心职责是安装调试工具。查看 template/src/main/index.dev.js 的源码// Install electron-debug with devtron require(electron-debug)({ showDevTools: true }) // Install vue-devtools require(electron).app.on(ready, () { let installExtension require(electron-devtools-installer) installExtension.default(installExtension.VUEJS_DEVTOOLS) .then(() {}) .catch(err { console.log(Unable to install vue-devtools: \n, err) }) }) // Require main process to boot app require(./index)它做了三件事启用electron-debug同时自动打开 DevTools、在app.ready后安装vue-devtools扩展、最后require(./index)引导真正的入口逻辑。正常情况下你不需要修改这个文件但可以按需扩展开发环境例如挂载额外的调试中间件。由于它是纯开发辅助构建生产包时 webpack 只会以src/main/index.js为入口进行打包index.dev.js不会进入最终产物。3.3 生产构建中的__dirname/__filename陷阱由于主进程代码经过 webpack 打包生产环境下__dirname与__filename并不会返回你预期源码位置的值。参考 docs/ja/main-process.md 与生产目录树见下文第四节生产环境中main.js位于app.asar/dist/electron/内因此所有基于__dirname的路径解析都必须以该实际位置为基准。如果只是需要定位static/静态资源目录请使用模板内置的__static全局变量其赋值逻辑可见于 template/src/main/index.js 与 template/src/index.ejs相关用法可进一步参考 docs/ja/using-static-assets.md。四、渲染进程与周边目录4.1src/renderer/Vue 应用所在渲染进程目录承载完整的 Vue 应用结构与标准 Vue 项目一致components/存放组件、router/存放 vue-router 配置、store/存放 vuex 状态模块、App.vue为根组件。入口文件 template/src/renderer/main.js 按脚手架选项动态引入router与store并完成new Vue(...).$mount(#app)的挂载。src/index.ejs见 template/src/index.ejs是渲染进程的 HTML 模板webpack 构建时会自动注入打包产物并处理开发期的node_modules全局路径与生产期的__static变量。4.2 构建输出与测试目录dist/electron/存放 webpack 打包结果main.js、renderer.js、index.html、拷贝后的static/dist/web/对应可选的 web 输出.electron-vue/内的三个 webpack 配置分别面向主进程、渲染进程与 web 构建详见 docs/ja/webpack-configurations.md。测试方面test/e2e/使用 Spectron 驱动应用做端到端测试template/test/e2e/index.js 通过babel-register启用 ES6、挂载 Chai 断言并加载specs/下的用例test/unit/使用 Karma Mocha 做组件单元测试配置见 template/test/unit/karma.conf.js。五、生产产物app.asar内部的精简结构打包发布后electron-builder/electron-packager会将应用压缩为app.asar其内部结构与开发期差异明显app.asar ├─ dist │ └─ electron │ ├─ static/ │ ├─ index.html │ ├─ main.js │ └─ renderer.js ├─ node_modules/ └─ package.json可以看到几乎所有开发期文件都被剥离源码src/、构建脚本.electron-vue/、测试test/均不出现仅保留 webpack 打包后的主进程/渲染进程产物、运行时依赖的node_modules与package.json。这在分发 Electron 应用时几乎是必须的——用户不应下载携带大量开发文件的臃肿软件包。同时上文中提到的__dirname行为变化正是由于生产环境下代码实际运行位置从「源码目录」变为了「app.asar/dist/electron/」。六、小结一份可对照的实践清单关注点结论依据依赖管理单一package.json即可dependencies进产物、devDependencies不进template/package.json原生模块使用electron-rebuild重建或直接用electron-builder自动处理docs/ja/project_structure.md主进程入口生产用src/main/index.js开发辅助用src/main/index.dev.jstemplate/src/main/index.js、template/src/main/index.dev.js路径解析生产环境__dirname/__filename不指向源码位置静态资源用__staticdocs/ja/main-process.md产物结构打包后仅剩dist/electron产物、node_modules与package.jsondocs/ja/file-tree.md掌握以上结构约定后无论是新增一个运行时依赖、引入原生模块还是排查生产环境下的路径问题你都能快速定位到正确的位置这也是 electron-vue 模板设计中最核心的组织哲学开发期自由分层构建期自动精简。【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/21 14:43:25 · 阅读 1.2k electron-vue 项目结构深度解析：单一 package.json、双进程目录与构建产物布局
electron-vue 项目结构深度解析单一 package.json、双进程目录与构建产物布局【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue导读对于使用 electron-vue 脚手架搭建 Electron Vue.js 应用的开发者而言理解项目的目录与文件组织方式是正确编写业务代码、配置构建与发布产物的第一步。本文以 docs/ja/project_structure.md 为骨架结合仓库内 template/ 下的真实模板源码系统讲解 electron-vue 的依赖管理策略单一package.json、main进程的入口文件分工、渲染进程的目录约定以及从开发态到生产态app.asar的产物结构变化。读完本文你将能准确判断某个模块该装进dependencies还是devDependencies清楚src/main/index.js与src/main/index.dev.js各自职责并明白__dirname在生产环境下的行为差异。一、总体结构与 vuejs-templates/webpack 一脉相承electron-vue 的模板结构对使用过官方vuejs-templates/webpack的开发者来说并不陌生二者在整体组织思路上高度相似都通过vue-cli脚手架生成都包含src/、static/、test/、build/或等价构建脚本目录等标准目录。差异在于 Electron 应用特有的「双进程」模型导致src/下被划分为main/与renderer/两个子目录分别对应主进程与渲染进程的代码。从 template/ 模板可以看到脚手架生成后的开发期目录骨架部分文件/目录会因脚手架交互选项而异my-project ├─ .electron-vue/ # 构建与开发脚本dev-runner.js、webpack.*.config.js 等 ├─ build/ │ └─ icons/ # 应用图标 ├─ dist/ │ ├─ electron/ # 主进程与渲染进程打包输出 │ └─ web/ # 可选的 web 输出 ├─ node_modules/ ├─ src/ │ ├─ main/ │ │ ├─ index.dev.js # 仅开发期使用安装调试工具 │ │ └─ index.js # 主进程入口生产构建的 webpack entry │ ├─ renderer/ │ │ ├─ components/ # Vue 组件 │ │ ├─ router/ # vue-router 配置 │ │ ├─ store/ # vuex 配置 │ │ ├─ App.vue │ │ └─ main.js # 渲染进程Vue 应用入口 │ └─ index.ejs # HTML 模板 ├─ static/ # 静态资源构建时拷贝 ├─ test/ │ ├─ e2e/ # Spectron 端到端测试 │ └─ unit/ # Karma 单元测试 ├─ package.json └─ README.md该目录树的具体形态可参见 docs/ja/file-tree.md 的英文版本 docs/en/file-tree.md。其中.electron-vue/目录集中了开发与构建相关的脚本与配置而dist/electron/是最终打包前 webpack 的输出目录。二、单一package.json依赖管理2.1 为什么可以只用一个package.json在 Electron 应用开发早期主进程依赖与渲染进程依赖常常需要拆分成两个package.json来管理以保证打包时只携带运行所需的模块。得益于 electron-userland 组织的努力electron-packager与electron-builder如今都已完整支持单一package.json设置开发者只需维护根目录这一个清单文件打包工具会自动区分哪些依赖需要进入最终产物。从 template/package.json 可以看出模板在main字段中声明了./dist/electron/main.js这正是 Electron 启动时寻找的入口脚手架{{ }}形式的占位符会根据用户在vue init时的选择打包器用electron-builder还是electron-packager、是否启用 eslint、单元测试、e2e 测试、sass 等动态生成不同的scripts与依赖列表。2.2dependencies会被打进生产应用的运行时依赖dependencies中的模块会被包含进最终的正式应用。凡是应用运行时所必需的模块例如 Vue 本身、axios 等插件都应安装在这里。模板默认将vue置于该区段dependencies: { vue: ^2.5.16 }打包工具尤其是electron-builder会把dependencies视为「运行时依赖」随应用一并分发。判断标准很简单如果应用缺少这个模块就无法工作就放进dependencies。2.3devDependencies仅开发/构建期使用devDependencies中的模块不会被包含进最终的正式应用。它们服务于开发与构建环节例如构建脚本、webpack加载器、linter、测试框架等。查看 template/package.json 的devDependencies区段可以看到典型清单构建工具webpack、webpack-cli、webpack-merge、babel-core、babel-loader、babel-preset-env、vue-loader、vue-template-compiler、css-loader、style-loader、url-loader、file-loader等开发服务器webpack-dev-server、webpack-hot-middleware配合npm run dev的热更新流程代码质量eslint、babel-eslint、eslint-loader等仅在启用 eslint 选项时生成测试karma、mocha、chai、spectrone2e等按选项按需生成Electron 本体electron、electron-debug、electron-devtools-installer、devtron以及打包器electron-builder或electron-packagerelectron-rebuild。同时模板提供了一组与构建/开发直接对应的 npm scripts见 template/package.json 的scripts区段dev: node .electron-vue/dev-runner.js, build: node .electron-vue/build.js electron-builder, build:dir: node .electron-vue/build.js electron-builder --dir, build:clean: cross-env BUILD_TARGETclean node .electron-vue/build.js, build:web: cross-env BUILD_TARGETweb node .electron-vue/build.js, pack: npm run pack:main npm run pack:renderer, pack:main: cross-env NODE_ENVproduction webpack --progress --colors --config .electron-vue/webpack.main.config.js, pack:renderer: cross-env NODE_ENVproduction webpack --progress --colors --config .electron-vue/webpack.renderer.config.js若选择electron-packager作为打包器build会替换为node .electron-vue/build.js并额外生成build:darwin/build:linux/build:win32/build:mas等按平台构建的脚本。2.4 原生 NPM 模块需要针对 Electron 重新编译Electron 使用的 Node 版本与系统 Node 的 ABI 不一定一致因此原生nativenpm 模块必须针对 Electron 版本重新构建否则运行时会出现 ABI 不匹配的错误。官方推荐的两种途径使用electron-rebuild手动执行重建选择electron-packager方案时模板会将其列入devDependencies更简单的方式是直接使用electron-builder作为构建工具——它会在打包流程中自动处理原生模块的下载、编译与链接等繁琐任务。从 template/package.json 可以看到模板按打包器选项二选一electron-packager分支依赖electron-rebuild^1.8.1而electron-builder分支依赖electron-builder^20.19.2。这也印证了文档的结论如果不想手工处理原生模块的构建细节优先选择electron-builder。三、main进程入口文件的分工3.1src/main/index.js应用真正的入口src/main/index.js是应用的主文件是 Electron 启动时加载的脚本也是生产构建时 webpack 的入口文件。所有主进程逻辑都从这里开始。从 template/src/main/index.js 可以看到模板实现的核心骨架引入app与BrowserWindow在app.on(ready)时调用createWindow()创建窗口根据环境选择加载路径开发期加载http://localhost:9080由 dev-runner 启动的 webpack dev server生产期加载file://${__dirname}/index.html处理window-all-closed与activate生命周期事件macOS 平台下点击 Dock 图标重新创建窗口在非开发环境下设置global.__static指向static/目录若选用electron-builder模板还会预留一段被注释的electron-updater自动更新示例代码。对应的package.json中main: ./dist/electron/main.js指向的正是 webpack 将src/main/index.js打包后的产物。3.2src/main/index.dev.js仅开发期存在的辅助入口开发期间你会注意到src/main/index.dev.js这个文件。它专门服务于开发环境核心职责是安装调试工具。查看 template/src/main/index.dev.js 的源码// Install electron-debug with devtron require(electron-debug)({ showDevTools: true }) // Install vue-devtools require(electron).app.on(ready, () { let installExtension require(electron-devtools-installer) installExtension.default(installExtension.VUEJS_DEVTOOLS) .then(() {}) .catch(err { console.log(Unable to install vue-devtools: \n, err) }) }) // Require main process to boot app require(./index)它做了三件事启用electron-debug同时自动打开 DevTools、在app.ready后安装vue-devtools扩展、最后require(./index)引导真正的入口逻辑。正常情况下你不需要修改这个文件但可以按需扩展开发环境例如挂载额外的调试中间件。由于它是纯开发辅助构建生产包时 webpack 只会以src/main/index.js为入口进行打包index.dev.js不会进入最终产物。3.3 生产构建中的__dirname/__filename陷阱由于主进程代码经过 webpack 打包生产环境下__dirname与__filename并不会返回你预期源码位置的值。参考 docs/ja/main-process.md 与生产目录树见下文第四节生产环境中main.js位于app.asar/dist/electron/内因此所有基于__dirname的路径解析都必须以该实际位置为基准。如果只是需要定位static/静态资源目录请使用模板内置的__static全局变量其赋值逻辑可见于 template/src/main/index.js 与 template/src/index.ejs相关用法可进一步参考 docs/ja/using-static-assets.md。四、渲染进程与周边目录4.1src/renderer/Vue 应用所在渲染进程目录承载完整的 Vue 应用结构与标准 Vue 项目一致components/存放组件、router/存放 vue-router 配置、store/存放 vuex 状态模块、App.vue为根组件。入口文件 template/src/renderer/main.js 按脚手架选项动态引入router与store并完成new Vue(...).$mount(#app)的挂载。src/index.ejs见 template/src/index.ejs是渲染进程的 HTML 模板webpack 构建时会自动注入打包产物并处理开发期的node_modules全局路径与生产期的__static变量。4.2 构建输出与测试目录dist/electron/存放 webpack 打包结果main.js、renderer.js、index.html、拷贝后的static/dist/web/对应可选的 web 输出.electron-vue/内的三个 webpack 配置分别面向主进程、渲染进程与 web 构建详见 docs/ja/webpack-configurations.md。测试方面test/e2e/使用 Spectron 驱动应用做端到端测试template/test/e2e/index.js 通过babel-register启用 ES6、挂载 Chai 断言并加载specs/下的用例test/unit/使用 Karma Mocha 做组件单元测试配置见 template/test/unit/karma.conf.js。五、生产产物app.asar内部的精简结构打包发布后electron-builder/electron-packager会将应用压缩为app.asar其内部结构与开发期差异明显app.asar ├─ dist │ └─ electron │ ├─ static/ │ ├─ index.html │ ├─ main.js │ └─ renderer.js ├─ node_modules/ └─ package.json可以看到几乎所有开发期文件都被剥离源码src/、构建脚本.electron-vue/、测试test/均不出现仅保留 webpack 打包后的主进程/渲染进程产物、运行时依赖的node_modules与package.json。这在分发 Electron 应用时几乎是必须的——用户不应下载携带大量开发文件的臃肿软件包。同时上文中提到的__dirname行为变化正是由于生产环境下代码实际运行位置从「源码目录」变为了「app.asar/dist/electron/」。六、小结一份可对照的实践清单关注点结论依据依赖管理单一package.json即可dependencies进产物、devDependencies不进template/package.json原生模块使用electron-rebuild重建或直接用electron-builder自动处理docs/ja/project_structure.md主进程入口生产用src/main/index.js开发辅助用src/main/index.dev.jstemplate/src/main/index.js、template/src/main/index.dev.js路径解析生产环境__dirname/__filename不指向源码位置静态资源用__staticdocs/ja/main-process.md产物结构打包后仅剩dist/electron产物、node_modules与package.jsondocs/ja/file-tree.md掌握以上结构约定后无论是新增一个运行时依赖、引入原生模块还是排查生产环境下的路径问题你都能快速定位到正确的位置这也是 electron-vue 模板设计中最核心的组织哲学开发期自由分层构建期自动精简。【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考