域名注册后怎么搭建网页班级优化大师使用心得
前言
经过vite打包后生成html等的文件，虽然可以运行，突然想把打包成exe文件
可以使用electron，笔者在网上搜索了一下，居然有个东西交nw，也可以进行打包，
既然如此，好好好，使用一下工作流。
参考文章
十分钟轻松入门 nw.js 实现桌面应用程序-CSDN博客
https://blog.csdn.net/kaimo313/article/details/126405942使用 nw-builder 构建跨平台桌面应用程序 - axl234 - 博客园https://www.cnblogs.com/axl234/p/7591869.htmlnw-builder - npmhttps://www.npmjs.com/package/nw-builder
正文
本地打包
安装
笔者在本地使用pnpm
pnpm add -g nw nw-builder
一个不必要的bug
安装nw后，按道理来说，
运行如下命令
nw -v就可以出现一个窗口。
但是
运行上面的命令。出现的内容如下
➜ nw -v
Error: spawn C:\Users\26644\AppData\Local\pnpm\global\5\.pnpm\nw@0.96.0\node_modules\nw\nwjs-v0.96.0-win-x64\nw.exe ENOENTat ChildProcess._handle.onexit (node:internal/child_process:286:19)at onErrorNT (node:internal/child_process:484:16)at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {errno: -4058,code: 'ENOENT',syscall: 'spawn C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',path: 'C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',spawnargs: [ '-v' ]
}
node:internal/modules/run_main:104triggerUncaughtException(^Error: spawn C:\Users\26644\AppData\Local\pnpm\global\5\.pnpm\nw@0.96.0\node_modules\nw\nwjs-v0.96.0-win-x64\nw.exe ENOENTat ChildProcess._handle.onexit (node:internal/child_process:286:19)at onErrorNT (node:internal/child_process:484:16)at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {errno: -4058,code: 'ENOENT',syscall: 'spawn C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',path: 'C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',spawnargs: [ '-v' ]
}Node.js v23.7.0报错了，经过deepseek的回答，它判断是否有nw.exe文件？
即下面这个目录的存在
C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe我打开目录。
没有nwjs-v0.96.0-win-x6目录了。然后，笔者发现这里面既有src，又有node_modes，难道这是个项目，因此。笔者打开package.json，在script中，发现了一个脚本postinstall
猜测这个postinstall脚本的意思是
post 请求进行install
意思就是发送一个post请求，进行安装，笔者尝试了一下
虽然报错了，但是，查看目录
感觉有了。
再次刚开始的目录下运行 nw -v
结果如下
运行成功。
准备打包
笔者通过vite打包生成的目录如下，
可惜没有一个关键的东西，需要在01-dist目录下新建一个package.json，才能运行。感觉很麻烦。
但是，笔者突然想到只要在publice目录下写下package.json，打包之后不就有package.json了。
先public目录下新建一个package.json文件，内容如下
{"name": "01-dist","version": "1.0.0","main": "index.html","window": {"icon": "vite.svg"}
}
上面四点name，version，main，icon，缺一不可。
少了一个，要么无法运行，要么报错。
再次打包
完美。
运行命令
nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./具体命令的含义可参考官网，也许可以把运行命令也写入public/package.json中
{"name": "01-dist","main": "index.html","version": "1.0.0","window": {"icon": "vite.svg"},"scripts": {"build": "nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./"}
}
再次打包。进入01-dist目录， 运行 pnpm run build
结果如下，。
这里就发现，好像不需要安装nw，因为nw-builder在运行的时候会自动安装nw，所以前面的bug是不必要的。
本地安装成功，很好。
再次思考，我是通过全局nw-builder进行打包。如果不使用全局，懂了，因此
再次修改public/package.json目录，使其拥有nw-builder依赖。
最终内容如下
public/package.json
{"name": "01-dist","main": "index.html","version": "1.0.0","window": {"icon": "vite.svg"},"dependencies": {"nw-builder": "^4.13.9"},"scripts": {"build": "nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./"}
}
工作流打包
流程
1、读取仓库代码
2、安装node
3、第一次打包(vite）
4、第二次打包(nw-builder)
5、上传打包结果
因此
.github/workflows/01-start.yaml文件的内容如下
name: 打包01项目
on:workflow_dispatch:inputs:ad:description: '打包'required: truedefault: 'true'type: boolean
jobs:build:runs-on: windows-lateststeps:- name: 读取项目uses: actions/checkout@v4- name: 设置node版本uses: actions/setup-node@v4with:node-version: '22'- name: 安装依赖并第一次打包run: |cd 01-quick-startnpm installnpm run build- name: 第二次打包run: |cd 01-distnpm installnpm run build- name: 上传uses: actions/upload-artifact@v4with:name: buildpath: build
结果如下
有点大。