Electron-vue脚手架改造vue项目的方法

Electron-vue脚手架是一个可以快速搭建Electron和Vue.js项目的基础框架。如果你已经有了一个使用Vue.js开发的项目，而且想要将其转换为一个Electron应用程序，那么本篇攻略将会为你提供详细的指导。

步骤一：创建Electron-vue项目

首先，我们需要创建一个新的Electron-vue项目，并将Vue.js项目的代码复制到其中。创建Electron-vue项目可以使用Vue CLI，该工具可以创建一个默认的Electron-vue项目：

vue create my-electron-vue-app
cd my-electron-vue-app
vue add electron-builder

这里我们使用Vue CLI创建了一个名为"my-electron-vue-app"的项目，并添加了 electron-builder 插件以用于构建和打包。如果你不了解Vue CLI和 Electron Builder，请先查阅它们的文档。

步骤二：配置Electron-vue环境

接下来，我们需要对新创建的Electron-vue项目进行一些简单的配置。这里以"my-electron-vue-app"项目为例：

1. 在项目根目录下创建一个名为"src-electron"的文件夹，用于存放Electron主进程的代码。

2. 在"src/main/index.js"中新增以下代码：

```js
const { app, BrowserWindow } = require('electron')

let mainWindow

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

 mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)

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

}

app.on('ready', createWindow)

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

app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
```

这段代码用于创建一个Electron窗口，以及设置窗口的基本属性和行为。

1. 修改"package.json"，将"main"的值改为"src/main/index.js"。例如：

json
{
"main": "src/main/index.js"
}

至此，我们已经完成了Electron-vue环境的简单配置。

步骤三：在Electron中运行Vue.js项目

接下来，我们需要将Vue.js项目的代码整合到Electron-vue项目中。这里提供两个示例：

示例一：通过iframe嵌入Vue页面

这种方法比较简单，我们只需要在Electron窗口中打开一个iframe，然后将Vue页面嵌入其中即可。实现步骤如下：

1. 在"src-electron"目录下新建一个文件，例如"main.js"，用于创建Electron主进程的代码。

2. 在"main.js"中添加以下代码：

```js
const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

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

 mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))

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

}

app.on('ready', createWindow)

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

app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
```

这里的代码与上面的代码类似，唯一不同的是加载的HTML文件路径。这里我们加载了Vue.js项目的打包文件"dist/index.html"。

1. 在Vue.js项目中，引入以下代码：

```html

```

这里我们将Vue.js项目的打包文件"dist/index.html"通过iframe嵌入到Electron窗口中。

示例二：将Vue.js项目整合到Electron中

这种方法比较复杂，但可以更深度地整合Vue.js项目和Electron。实现步骤如下：

1. 在Vue.js项目根目录下执行以下命令：

bash
npm run build

这里的命令会打包Vue.js项目，并生成一个"dist"目录，用于存放打包后的文件。

1. 在Electron窗口中添加以下代码：

```js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const serve = require('electron-serve')

let mainWindow

const loadUrl = serve({ directory: path.join(__dirname, '../dist') })

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

 if (process.env.NODE_ENV === 'development') {
   mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
 } else {
   loadUrl(mainWindow)
 }

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

}

app.on('ready', createWindow)

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

app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
```

这里的代码与上面的代码类似，唯一不同的是加载的HTML文件路径。这里我们通过"electron-serve"（一个Electron中的静态资源服务器）加载了Vue.js项目的打包文件"dist"。

至此，我们已经完成了将Vue.js项目转换为Electron应用程序的整个流程。你现在可以通过运行"npm run electron:serve"来启动Electron应用程序。