Node.js: Electron + vue cli3 项目整合配置

适用情况

• 需求是使用 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 作为单元测试，完成后进入 vue 工程目录执行以下命令执行第一次单元测试

yarn run test:unit

打包、解决提到的问题

在以前创建的 Electron + Vue 项目中，Vue 打包后生成的页面是可以直接在浏览器中查看的，说明肯定可以通过调整配置解决这个问题，参考的其他博客说这种情况发布到服务器上就消失了，但是对 Electron 不适用。在控制台中看到的问题的确是静态文件（js、css等）找不到，原因是路径不对，原因是路径配置不正确

按照已有的办法，调整 vue 根目录下的 config/index.js 即可，但是按照上述的构建过程，并没有该目录

在 vue 根目录下创建 vue.config.js 调整配置（也可配置端口等）配置内容如下

const path = require('path')

module.exports = {
  // 生成环境：打包后生成的代码中，静态文件的查找路径，默认为'/'
  publicPath: process.env.NODE_ENV === 'production'
    ? './static/'
    : '/',
  // 当运行 build 时静态文件的存放路径
  outputDir: path.resolve(__dirname, '../static'),
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: './',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)
  indexPath: path.resolve(__dirname, '../index.html'),
};

通过以上配置可以解决提到的问题，打包后可以直接在浏览器打开 build 后生成的 index.html 可以正常获取到静态资源，当前项目结构、运行生成的 exe 文件后的截图如下，至此问题解决

参考链接

• 使用镜像解决安装electron出问题
• 在Electron中配置VUE
• 关于npx以及切换npm镜像源
• 前端如何做测试驱动开发-vue版
• vue-cli3项目如何修改项目配置
• Electron文档