基于 Vite 创建 Electron 项目

       npm create vite@latest

       Project name: vite-demo

       Select a framework: Others

       Select a variant: create-electron-vite

       Project template: Vue

项目下配置 .npmrc 文件

       registry=https://registry.npmmirror.com/

       electron_mirror=https://npmmirror.com/mirrors/electron/

       electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/        

       注

       electron_mirror 是 Electron 的镜像源

       electron_builder_binaries_mirror 是 Electron Builder 二进制文件的镜像源

安装依赖并运行项目

 cd vite-demo

 npm i

 npm run dev

src\App.vue

       <script setup lang="ts">

       </script>

       <template>

         dengruicode.com

       </template>

       <style scoped>

       </style>

electron-builder.json5

       {

         "productName": "邓瑞编程",

         "appId": "com.dengruicode.www",

         "mac": {

           "icon": "electron/resource/images/code.icns",

           "target": "dmg"

         },

         "win": {

           "icon": "electron/resource/images/code.ico",

           "target": [

             {

               "target": "nsis",

               "arch": ["x64"]

             }

           ]

         },

         "nsis": {

             "oneClick": false,

             "perMachine": true,

             "allowToChangeInstallationDirectory": true

         },

         "files": [

           "dist",

           "dist-electron"

         ],

         "directories": {

           "output": "build"

         }

       }

       注

       electron-builder.json 不支持注释

       electron-builder.json5 支持行注释 (//) 和块注释 (/* ... */) 等

运行项目

       npm run dev

运行 npm run build 报错:

       electron/main.ts:6:7 - error TS6133: 'require' is declared but its value is never read.

       解决方法: (注释 electron\main.ts 代码)

       //import { createRequire } from 'node:module'

       //const require = createRequire(import.meta.url)

       注

       vue-tsc 用于在 Vue 项目中执行 TypeScript 的类型检查