首页项目

# electron - 从零搭建一个 electron 项目

# 前言

要想将 vue 引入 electron 中有两种方式，分别为 electron-vue 和 Vue CLI Plugin Electron Builder. 前者虽然出的早，但很久不维护了。因此这边使用后者即 Vue CLI Plugin Electron Builder。首先需要用 vue 的脚手架生成 vue 项目，然后在引入 electron 插件。

# 创建 electron 项目

# 1、创建 vue 项目

1
2
npm i @vue/cli -g //全局安装vue cli脚手架
vue create <name> //脚手架创建vue项目，前面和创建vue项目一模一样

# 2、添加 electron 插件

1
2
vue add electron-builder 
cnpm i electron --S //这里用npm的话大概率下载不了，因为electron有一部分代码在GitHub中，要么改镜像要么直接用cnpm

这时一个 electron 项目就出来了。

# 配置

如果用最新的 vue-cli 的话，这时 webpack 应该在 5 以上，5 以上的 webpack 不再自动引入 polyfill 了，原因是引入这个会让最后的打包体积变得很大，webpack 不建议开发者在浏览器端使用 polyfill。现在要么不用 node，要么手动引入 polyfill。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
cnpm install --save path-browserify crypto-browserify//安装path-browserify和crypto-browserify

//在vue.config.js中加入如下配置。
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      fallback: {
        "fs": false,
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify")
      }
    }
  }

之后会出现’__dirname is not defined’这个错误。

1
2
3
4
5
6
在上面的基础上加如下的配置即可。
pluginOptions:{
   electronBuilder:{
     nodeIntegration:true
   }
 }