Vite+Vue+TS使用Electron 极限踩坑，Webstorm WSL，Linux下build Electron Windows

Vite+Vue+TS使用Electron 极限踩坑，Webstorm WSL，Linux下build Electron Windows

环境：Windows11+WSL2（Ubuntu22），其他均latest（使用npm）
写的时候使用Webstorm2022.2，现在2022.3已经发了，添加了Vite的支持，刚发就看了两眼vue项目的情况，确实好评。但是因为要加其他玩意，还是很少会用Webstorm给的啥都没有的模板。

极限踩坑 buff拉满

坑包括：

• 2022.2版本的webstorm没有vite的支持，需要手动npm；
• wsl下热更新无效和局域网无法访问到vue的问题，添加usiPolling解决；
• wsl下开发electron（dev）可以显示窗口，但是很明显是ubuntu下的，关闭后不会直接杀掉；
• linux下编译electron的Windows内容，需要wine，但是wine64报错需要wine32；要用Windows下的nsis内容，还得要个Mono；
• Electron不认得TS，官方文档的完全没法跑；
• 几乎没看到一样的方案（）

完整过程

手动初始化普通vue项目

使用npm create vite@latest创建项目，（试试electron，就不加route之类的了）。
npm i初始化，由于是在wsl下，要正常启用hmr热更新和丢上局域网，vite.config.ts下添加：

server:{
    watch: {
      usePolling: true
    },
    host:true,
  },

npm dev正常看到vue，热更新正常

使用vite-plugin-electron插件

因为Electron不认识ts，所以…
GitHub地址：vite-plugin-electron
参考给的example和文档，在以下内容中做修改：

• 第一步：为了简化流程，照搬vite-plugin-electron/examples/quick-start/electron目录，丢到项目目录下；（照搬后，webstrom会给红，因为没启动过vite-plugin-electron还没生成对应内容，况且electron不认识ts只认识js，需要vite-plugin-electron生成js。很像普通vue开发时引入auto-import插件的情况）
• 需求依赖（dev）："electron": "^21.0.1", "electron-builder": "^23.1.0","vite-plugin-electron": "^0.10.4",
• 在vite.config.ts中插件中添加：

electron([
    { entry: 'electron/main.ts' },
    {
      entry: 'electron/preload.ts',
      onstart(options) {
        // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
        // instead of restarting the entire Electron App.
        options.reload()
      },
    },
    ])

当然还需要import electron from "vite-plugin-electron";

• 照搬electron-build.json5，用于build
• package.json中添加："main": "dist-electron/main.js",；build的配置改为tsc && vite build && electron-builder（按需要更改，比如-win）
• 有需要的话，引入tsconfig.json。但是目前看来，vite给的内容似乎已经满足需要。

总结需要改的东西

• 改：package.json （“main”和build脚本配置）
• 改：vite.config.ts （添加插件使用，注意import）
• 添加：electron文件夹和对应内容
• 添加：electron-build.json5用于build

注意点

• 由于npm在wsl下，直接dev的窗口是运行在wsl里面的，通过Windows放出来的窗口关闭后，wsl里的进程还活着；
• 同时，需要在wsl内编译windows安装包的话，需要安装wine；但是安装wine64后运行时提示需要wine32，所以又需要添加32支持后update后install wine32。安装wine32可以自行参考（如果你也提示需要Wine32的话）。
• vite-plugin-electron的实例中的electron-build.json5使用了Windows nsis，所以Linux下还需要个Mono；

后话

接下来开发就是正常流程了，electron目录下的ts可以正常写（反正插件会翻译给electron听的），electron-build.json5也可以按需求改，electron-builder的文档也有写配置内容。

反过来想，转移一个正常web vue，只需要把上面的拿过来把src换了加个依赖就可以出货了。

解释

• 跟着文档来做就行，谁出问题出啥问题找谁家解决。
• 为什么把nodejs塞到wsl里？说实话，我不是专门写前端的，我单纯不想塞在Windows里。