Electron - #001 搭建Windows开发环境（Vue3+TS）

搭建Windows开发环境（Vue3+TS）

1 目标

搭建Electron的Windows开发环境。

2 步骤

2.1 下载 Node.js并安装

PS C:\Users\tauri> node -v
v20.17.0

PS C:\Users\tauri> npm -v
10.8.2

2.2 创建工程

npm create vite@latest electron-demo

2.3 安装依赖

npm install -D electron
npm install -D electron-builder
npm install -D electron-devtools-installer
npm install -D vite-plugin-electron

2.4 创建项目入口

cargo install create-tauri-app --locked

在src同级目录创建src-electron文件夹，并且在这个文件夹下创建main.js文件，做为electron应用程序的入口。

const { app, BrowserWindow } = require('electron')
const { join } = require('path')

// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

2.5 修改vite.config.ts文件

配置入口

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

// electron begin
import electron from 'vite-plugin-electron'
// electron end

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // electron begin
    electron({
      entry: './src-electron/main.js'
    })
    // electron end
  ],
  server: {
    // 端口
    port: 8100,
  }
})

2.6 修改package.json

去掉默认的“type”: “module”,添加“main”: “./src-electron/main.js”,

修改后：

{
  "name": "electron-demo",
  "private": true,
  "version": "0.0.0",
  "main": "./src-electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "electron": "^32.0.2",
    "electron-builder": "^25.0.5",
    "electron-devtools-installer": "^3.2.0",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vite-plugin-electron": "^0.28.7",
    "vue-tsc": "^2.0.29"
  }
}

2.7 运行

npm run dev