### **一、准备工作**
首先，在基于 Vue 的项目基础上，请确保已经安装了 Node.js 并配置好 npm 生态环境。然后初始化一个新的 Electron 或 NW.js 项目：
1. 对于**Electron**：
- 首先全局安装 electron-prebuilt 创建器：`npm install --global electron`
- 在你的 Vue 工程根目录下创建一个名为 `main.js` 文件作为主进程入口。
2. 而对于**NW.js**:
- 下载适用于你平台的 SDK 包并解压至合适位置，并保证其与 Vue项目的相对路径正确无误。
- 修改 package.json 中 "name" 字段以匹配 nw.exe 启动时寻找资源的基础名称。
### **二、集成Vue工程进入Electron/NW.js框架**
#### _**集成进Electron:**_
1. 主进程中加载渲染进程（即我们的 Vue 应用）
javascript
// main.js (Electron)
const { app, BrowserWindow } = require('electron')
let win
function createWindow () {
// 新建窗口实例
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载本地vue编译后的index.html或者启动热更新服务指向dist/index.html等
if (process.env.NODE_ENV === 'development') {
// 如果是开发模式，则打开localhost上的dev-server地址
win.loadURL(`http://localhost:${ process.argv[2] || '3000'}`)
} else {
// 正式环境下直接加载打包后静态资源
win.loadFile('./dist/index.html');
}
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
#### _**集成进NW.js**_
修改package.json中的 `"main"`字段指定为Vue构建输出的目标HTML文件路径:
json
{
...
"main": "./dist/index.html",
"node-main": "", // 若有额外需运行的节点js脚本可以在此设置
...
}
之后可通过命令行启动nw(.exe)，如:`./path/to/nw .`(Mac/Linux)/`.\\path\\to\\nw.exe .`(Win)
### **三、Vue项目的打包优化及兼容性处理**
为了使Vue应用能在Electron或是NW.js环境中良好工作，我们需要对webpack或其他构建工具进行一些调整来适配这两个平台：
1. 设置正确的publicPath值使得静态资源能够正常被加载。
2. 使用target:'web'(默认即可),避免面向node的情况导致部分库无法正常使用问题。
3. 若要调用电磁API，可能还需开启 `nodeIntegration`,并在安全策略允许的情况下谨慎引入Node模块。
### **四、最终打包步骤**
当您的Vue+Electron/NW.js结合完成并且功能验证没有问题的时候，就可以开始制作真正的EXE可执行包：
- **针对Electron**: 利用electron-builder或者其他类似的打包工具能轻松实现跨平台发布目标。例如，在项目根目录添加.electron-build.yml(或者是其他格式的配置文件），定义各种发行版参数以及图标、版权信息等内容；最后只需一行指令便可自动完成构建过程：`npx electron-builder build`.
- **而对于NW.js**, 官方提供了nwjc工具用于压缩JavaScript代码，同时也有第三方工具比如grunt-nwbuilder或gulp-nodewebkit协助自动化打包流程。通常情况下你需要手动把NW.js runtime和你的应用一起打包形成单一的.nw文件夹结构，再利用相关机制转换为对应操作系统下的可执行文件。
总结起来，借助 Electron 或者 NW.js 我们可以把 Vue 构建出的功能丰富又美观易用的界面包装成为可在各主流平台上独立运行的桌面软件。不过需要注意的是由于二者都内嵌了一个完整的Chromium引擎以及其他必要的依赖项，所以生成的 EXE 文件体积会相应较大，这是此类技术方案的一个常见特点。此外，在享受便捷的同时也应关注由此带来的安全性挑战，合理地设定沙箱规则并对敏感接口加以保护显得尤为重要。
