李恒道 发表于 2024-12-25 08:58:57

electron+vue脚手架搭建

```
vue create vue-electron-app
```
在你的项目中安装 Electron
```js
cd vue-electron-app
npm install --save-dev electron
```
根目录创建一个main.js
```js
// main.js
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
});

mainWindow.loadFile('dist/index.html'); // Adjust the path based on your build directory

mainWindow.on('closed', function () {
    mainWindow = null;
});
}

app.whenReady().then(createWindow);

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

app.on('activate', function () {
if (mainWindow === null) createWindow();
});
```
packjson加一个script配置`"electron-build": "npx electron ./main.js",`
![图片.png](data/attachment/forum/202412/25/085753zonkh2dzzz9hfogh.png)
在vue.config.js加一个 `publicPath: './' `
![图片.png](data/attachment/forum/202412/25/085817iusburv02urtsf9t.png)
然后运行npm run build编译vue文件
再nom run electron-build运行
![图片.png](data/attachment/forum/202412/25/085853al8mdii0rrgrlmql.png)

爬格子PA 发表于 3 天前

谢谢,很有用的分享!!
页: [1]
查看完整版本: electron+vue脚手架搭建