Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

• Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.

node 18.0.0

.vue 类型错误

declare module '*.vue' { import type { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component }

ts 类型错误

"include": ["vite.config.ts","plugins/**/*.ts"]

Error: Dynamic require ofnode_modules/esbuild/lib/main.js" is not supported

package.json 的 type 去掉 // 不要这样用 const { build } = require('esbuild'); // 这样写就好了 import esbuild from 'esbuild'

nsis 配置详解

{"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装） "allowElevation": true, // 是否允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序） "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序） "installerIcon": "public/timg.ico",// 安装程序图标的路径 "uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径 "installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序） "installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序） "installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸 164314 （仅作用于辅助安装程序） "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸 164314 （仅作用于辅助安装程序） "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称 "createDesktopShortcut": true, // 是否创建桌面快捷方式 "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式 "shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称 "include": "script/installer.nsi", // NSIS 包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作) "script": "script/installer.nsi", // 用于自定义安装程序的 NSIS 脚本的路径 "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序） "runAfterFinish": true, // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框） "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为 true，则使用公司名称 }

如果使用 npm init vue@latest 报错

error when starting dev server: Error: Cannot find module 'node:path'

nodejs 升级为 16 版本就好了 这些配置是针对 Electron 应用程序的构建和打包过程的。它们通常用于 Electron Builder（一个流行的 Electron 应用程序打包工具）的配置文件（如 package.json 或 electron-builder.yml）。以下是对这些配置的详细解释：

配置

在 Electron Builder 的配置中，directories 字段用于指定构建过程中涉及的目录路径。在你给出的配置中，directories 包含了两个子字段：output 和 app。

1. output：

   • 这个字段指定了构建输出的目录，即 Electron Builder 完成打包后，生成的最终文件（如 .exe、.dmg、.AppImage 等）将存放在这个目录下。
   • 在你的配置中，output 被设置为当前工作目录（process.cwd()）下的 release 文件夹。这意味着，当你运行构建命令时，Electron Builder 会在你的项目根目录下的 release 文件夹中生成构建产物。

2. app：

   • 这个字段指定了应用程序源代码的目录，即 Electron Builder 在打包时将从哪个目录读取你的应用程序文件。
   • 在你的配置中，app 被设置为当前工作目录（process.cwd()）下的 dist 文件夹。这通常意味着你的应用程序源代码在构建之前已经被编译或打包到了 dist 文件夹中（例如，你可能使用了一个前端构建工具如 Webpack 或 Vite 来生成这个 dist 文件夹）。

3. 基础配置

   • appId: 应用程序的唯一 ID。
   • productName: 应用程序的名称。
   • asar: 启用 ASAR 打包，这是一种将应用程序的源代码打包为单个归档文件的格式，以提高安全性和加载速度。
   • copyright: 应用程序的版权信息。
   • directories.output: 输出目录的路径，即打包后的文件将放在这里。
   • files: 需要打包到应用程序中的文件和目录列表。在这里，它指定了 dist 目录。

4. Mac 配置

   • mac.artifactName: 用于定义 Mac 应用程序包（如 .dmg 或 .app）的文件名模板。${productName}、${version} 和 ${ext} 是变量，它们会被实际的产品名称、版本和文件扩展名替换。
   • mac.target: 指定要构建的 Mac 目标格式。在这里，它只构建了 .dmg（磁盘映像）格式。

5. Windows 配置

   • win.target: 指定要构建的 Windows 目标格式。这里，它指定了 nsis（NSIS 是 NSIS Installer System 的缩写，一种用于创建 Windows 安装程序的工具），并且只针对 x64 架构。
   • win.artifactName: 与 Mac 配置相似，定义了 Windows 安装程序（如 .exe）的文件名模板。

6. nsis 配置

   • 这些配置是专门为 NSIS 安装程序设置的。
     • oneClick: 是否创建单击安装程序。如果为 false，则用户将在安装过程中看到更多选项。
     • perMachine: 是否为所有用户安装应用程序。如果为 false，则应用程序将仅针对当前用户安装。
     • allowToChangeInstallationDirectory: 允许用户在安装过程中更改安装目录。
     • deleteAppDataOnUninstall: 在卸载时是否删除应用程序数据。

7. 发布配置

   • publish: 定义发布配置。在这里，它配置了一个名为 generic 的提供者，这意味着它将发布到指定的 URL（在本例中是本地服务器 http://127.0.0.1:8080）。这通常用于将构建结果上传到服务器以供下载。

8. 版本信息

   • releaseInfo.releaseNotes: 定义版本更新的具体内容。这通常用于在发布新版本时向用户显示有关更改和新增功能的说明。

这些配置提供了对 Electron 应用程序打包过程的精细控制，确保生成的安装程序符合您的需求和期望 。

electron-builder

https://www.electron.build/