前言

由于项目需求，搭建个最新的Electron项目，在搭建的过程中，还是发现了一些坑，所以记录一下，整个搭建过程和需要注意的事项。

搭建应用

pnpm create vite electron-vue3

选择vue+ts，运行就看到我们熟悉的的页面,这步应该不会有太多惊喜(意外)。

因为直接使用@/**** 会报错，所以需要配置一下别名

vite.config.ts 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path" // 这个path用到了安装的@types/node, pnpm install @types/node -D

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src')
    }
  }
})

tsconfig.json 配置 - 在compilerOptions下面

"baseUrl": "./",	// 解析非相对模块的基地址，默认是当前目录
"paths": {"@/*": ["src/*"]}	// 路径映射，相对于baseUrl

安装electron

1.下载需要用到的相关依赖 electron国内大概率是拉不下来，可以配置一下镜像

pnpm config set electron_mirror=https://npm.taobao.org/mirrors/electron/

pnpm config set electron_builder_binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
```
pnpm install electron -D
pnpm install electron-builder -D
pnpm install vite-plugin-electron -D
```
2.创建electron主进程入口首先在根目录新建 electron/main.ts, 也可以在别的路径

import { app, BrowserWindow } from 'electron';
import { join } from 'path'

// 是否是开发环境
const isDev = process.env.NODE_ENV == "development" ? true : false

const createdWindow = () => {
    const win = new BrowserWindow({
        width: 900, // 窗口宽度
        height: 600, // 窗口高度
        webPreferences: {
            // 指定预加载脚本
            // preload: join(__dirname, 'preload.js'),
            nodeIntegration: true, // 允许在窗口中使用 Node.js 的 API
            contextIsolation: false, // 警告提示
            webSecurity: false // 允许跨域
        }
    })

    console.log(process.env)
    // 主窗口加载URL
    if (isDev) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL); // 使用vite开发服务的url路径访问应用
        // win.webContents.openDevTools() // 开启调试面板
	  } else {
	      win.loadFile(join(__dirname, '../dist/index.html')); // 打包后使用文件路径访问应用
	  }
}

app.whenReady().then(() => {
    createdWindow()
})

3.配置vite.config.ts 我们可以直接在vite.config.ts改，或者拷贝一份改名“vite.config.ts”改。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry:"electron/main.ts"
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve('./src')
    }
  },
  server: {
    port: 5186,
    host: '0.0.0.0'
  }
})

4.配置package.json 增加运行命令

type字段去除,将入口文件改为dist-electron/main.js

"main": "dist-electron/main.js",
"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "dev:ele": "chcp 65001 && vite --config vite.config.electron.ts",
    "build:ele": "vue-tsc && vite build --config vite.config.electron.ts && electron-builder"
  }

chcp 65001是解决打印中文乱码

--config vite.config.electron.ts 是上面使用了vite.config.electron.ts配置

运行之后我们就可以看到

打包

在package.json添加 build

"build": {
    "appId": "com.a1.a",
    "productName": "electronTest",
    "copyright": "Copyright © 2023",
    "artifactName": "electronTest.exe", // 安装包名
    "win": {
      "icon": "public/logo.png",
      "target": {
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    },
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowToChangeInstallationDirectory": true // 容许用户选择安装位置
    },
    "files": [ // 指定electron-builder需要打包的文件
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "electron_dist" // 设置出口文件
    },
    "publish": { // 升级用
      "provider": "generic",
      "url": "https://**" // 存储服务器的下载连接。
    }
  }

打包之后文件路径electron_dist

其他

还可以不用vite-plugin-electron方式

运行命令

"electron:dev": "electron .",
"electron:build":"vue-tsc --noEmit && vite build && electron-builder"

如果在ts项目中，需要将electron文件中的ts入口文件先进行打包编译，并设置package.json的入口文件为打包编译后的.js文件作为入口文件例：dist/electron/main.js，具体验证这里不分享了。

继续挖坑之路...

Electron+Vite+Vue3+Ts项目搭建

前言

搭建应用

安装electron

打包

其他