本文档详细介绍了如何将Electron与Vue CLI3结合，用于构建桌面应用，特别是在使用TDD的情况下。在项目构建过程中，遇到Vue打包后在Electron中无法显示内容的问题，原因是静态资源路径配置不正确。通过在Vue项目根目录下创建vue.config.js并调整配置，成功解决了这个问题。此外，还提供了参考链接帮助解决Electron项目中可能遇到的其他问题。
适用情况
- 需求是使用 Electron + Vue 搭建一个桌面端程序，要求使用测试驱动开发（TDD）这里针对这个需求做一个 demo 以熟悉整体流程
- 使用 vue cli3 构建项目完成后，不知道如何配置打包
- 打包配置不正确，导致在浏览器测试没有问题，但是打包（build）后，在 Electron 中打开没有内容，查看源码只有提示：We're sorry but tdd-vue doesn't work properly without JavaScript enabled. Please enable it to continue.
- 包的安装等这里不做解释
- 在遇到问题时，没有能直接解决问题的参考，在此做一下记录。因为遇到的问题不可能符合所有情况，仅供参考
项目构建过程（忽略即可）
执行以下命令，初始化 electron-forge 项目
yarn electron-forge init tdd-elec进入 src 目录，执行以下命令初始化 vue 项目
vue create tdd-vue选择 Manually ，勾选 Babel, Router, Linter, Unit ，测试时使用 Jest 作为单元测试&#
最低0.47元/天 解锁文章
扫一扫
2073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
