查看“Electron+Vue3配置-搭建项目”的源代码


<span id="创建-vue-项目"></span>
== 创建 Vue 项目 ==

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：

<pre>npm init vue@latest </pre>
<br>

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，本项目只做示例，所以只选了 Vue Router ：

<pre>✔ Project name: … electron_vue3_test
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … No
✔ Add Prettier for code formatting? … No</pre>
<br>

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

<pre>cd &lt;your-project-name&gt;
npm install
npm run dev</pre>
<br>

执行后终端显示如下：

<pre>VITE v3.1.2  ready in 333 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose</pre>
<br>

<span id="安装-electron"></span>
== 安装 Electron ==

执行以下命令安装 Electron ：

<pre>npm install electron --save-dev</pre>
<br>

如果安装过程中卡住，可尝试设置以下环境变量

<pre>ELECTRON_MIRROR=&quot;https://npmmirror.com/mirrors/electron/&quot;</pre>
<br>

<span id="运行-electron"></span>
== 运行 Electron ==

在根目录创建 electron 文件夹，新建 index.html 文件，添加如下代码：

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --&gt;
    &lt;meta
    http-equiv=&quot;Content-Security-Policy&quot;
    content=&quot;default-src 'self'; script-src 'self'&quot;
    /&gt;
    &lt;meta
    http-equiv=&quot;X-Content-Security-Policy&quot;
    content=&quot;default-src 'self'; script-src 'self'&quot;
    /&gt;
    &lt;title&gt;Hello from Electron renderer!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello from Electron renderer!&lt;/h1&gt;
    &lt;p&gt;👋&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br>

在 electron 目录下新建文件 main.js，并添加如下代码：

<pre>const { app, BrowserWindow } = require('electron')
const path = require(&quot;path&quot;)

const createWindow = () =&gt; {
const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
})

// 使用 loadFile 加载 electron/index.html 文件
mainWindow.loadFile(path.join(__dirname, &quot;./index.html&quot;));
}

// 在应用准备就绪时调用函数
app.whenReady().then(() =&gt; {
createWindow()
})</pre>
<br>

修改 package.json 文件，指定 electron/main.js 为 Electron 的入口文件，并添加 electron:dev 命令以开发模式运行 Electron：

<pre>{
    &quot;main&quot;: &quot;electron/main.js&quot;,
    &quot;scripts&quot;: {
        &quot;electron:dev&quot;: &quot;electron .&quot;
    }
}</pre>
然后打开终端，执行 npm run electron:dev ，Electron 运行成功

<br>

<span id="vue-和-electron-结合"></span>
== Vue 和 Electron 结合 ==

删除 electron/index.html 文件，修改 electron/main.js 文件代码如下：

<pre>const { app, BrowserWindow } = require('electron')
// const path = require(&quot;path&quot;)

const createWindow = () =&gt; {
const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
})

// 主要改了这里
// mainWindow.loadFile(path.join(__dirname, &quot;./index.html&quot;));
// 使用 loadURL 加载 http://localhost:5173 ，也就是我们刚才创建的 Vue 项目地址
// 5173 改为你 Vue 项目的端口号
mainWindow.loadURL(&quot;http://localhost:5173/&quot;);
}

app.whenReady().then(() =&gt; {
createWindow()
})</pre>
<br>

打开终端，执行 npm run dev 启动 Vue 项目，再新建一个终端，执行 npm run electron:dev 启动 Electron ，即可成功启动。

<br>

== 合并命令 ==

这样每次启动项目需要分别执行两个命令，有些麻烦，我们使用 concurrently把它们合并成一个命令。

<br>

执行以下命令，安装 concurrently：

<pre>npm install concurrently --save-dev</pre>
<br>

修改 package.json 文件中的 electron:dev 命令，同时执行 vite 和 electron . 两个命令，用引号将单独的命令括起来，并使用 <code>\</code> 转义引号，代码如下：

<pre>// package.json
{
    &quot;scripts&quot;: {
        &quot;electron:dev&quot;: &quot;concurrently vite \&quot;electron .\&quot;&quot;
    }
}</pre>
重新执行 npm run electron:dev ，即可成功显示。

<br>