阿尔炜 發表於 2023-3-8 00:55:00

Electron+Vite+React搭建

<p>有两种方式：</p>
<ol>
<li>使用electron-vite框架搭建，优点是环境齐全、搭建简单</li>
<li>自己一步步搭建。（推荐）</li>
</ol>
<h1 id="第一种使用别人的框架直接搭建">第一种：使用别人的框架直接搭建</h1>
<p>容易<br>
使用的框架为electron-vite<br>
官网地址：https://cn-evite.netlify.app/</p>
<h2 id="1安装electron-vite">1、安装electron-vite</h2>
<pre><code class="language-base">npm i electron-vite -D
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308004823372-212349624.png"></p>
<h2 id="2创建项目">2、创建项目</h2>
<pre><code class="language-base">yarn create @quick-start/electron
</code></pre>
<p>这里项目名字为：electron-app（自行修改），使用react框架<br>
<img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308004909973-185509998.png"></p>
<h2 id="3进入项目目录">3、进入项目目录</h2>
<pre><code class="language-base">cd electron-app
</code></pre>
<h2 id="4安装依赖">4、安装依赖</h2>
<pre><code class="language-base">yarn
</code></pre>
<h2 id="5运行">5、运行</h2>
<pre><code class="language-base">yarn dev
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308005316175-1886220141.png"></p>
<h2 id="6修改页面">6、修改页面</h2>
<p>src/renderer/src即为修改页面的位置<br>
src/renderer/src/App.tsx<br>
<img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308005424453-1102292959.png"></p>
<h1 id="第二种自己搭建">第二种：自己搭建</h1>
<p>Electron+Vite+React</p>
<h2 id="1创建项目">1、创建项目</h2>
<p>项目名称为：【my-electron】</p>
<pre><code class="language-bash">npm init vite@latest my-electron
</code></pre>
<h2 id="2安装项目依赖">2、安装项目依赖</h2>
<pre><code class="language-bash">cd my-electron
npm install
</code></pre>
<h2 id="3安装插件">3、安装插件</h2>
<pre><code class="language-bash">npm i concurrently electron cross-env -D
</code></pre>
<h2 id="4mainjs">4、main.js</h2>
<pre><code class="language-javascript">const { app, BrowserWindow } = require('electron');

class AppWindow extends BrowserWindow {
constructor(config, urlLocation) {
    const basicConfig = {
      width: 800,
      height: 600,
      webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      enableRemoteModule: true,
      nodeIntegrationInWorker: true,
      },
      show: false,
      backgroundColor: '#efefef',
    };
    const finalConfig = { ...basicConfig, ...config };
    super(finalConfig);
    this.loadURL(urlLocation);
    this.once('ready-to-show', () =&gt; {
      this.show();
    });
}
}

app.on('ready', () =&gt; {
const mainWindowConfig = {
    width: 1440,
    height: 768,
};
const urlLocation = 'http://localhost:5173';
mainWindow = new AppWindow(mainWindowConfig, urlLocation);
mainWindow.on('closed', () =&gt; {
    mainWindow = null;
    app.quit();
});
});
</code></pre>
<h2 id="5packagejson">5、package.json</h2>
<p>删除：“type”：“module”</p>
<p>添加："dev": "concurrently "electron ." "cross-env BROWSER=none vite""</p>
<p>更改：“dev”：“vite”   ——&gt;   "start": "vite",</p>
<pre><code class="language-json">{
"name": "my-electron",
"private": true,
"version": "0.0.0",
"main": "main.js",
"scripts": {
    "start": "vite",
    "build": "tsc &amp;&amp; vite build",
    "preview": "vite preview",
    "dev": "concurrently \"electron .\" \"cross-env BROWSER=none vite\""
},
"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
},
"devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^23.1.2",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
}
}
</code></pre>
<h2 id="6启动项目">6、启动项目</h2>
<pre><code class="language-bash">npm run dev
</code></pre>
<h2 id="7concurrently">7、concurrently</h2>
<p>concurrently插件能够同时启动前段和后端项目</p>
<p>如果不适用concurrently，则需要先启动start，后启动dev</p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303080935065.png"></p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303080935574.png"></p>
<h2 id="8cross-env">8、cross-env</h2>
<p>官网</p>
<p><strong>cross-env</strong>：运行跨平台设置和使用环境变量的脚本</p>
<p>windows不支持NODE_ENV=development的设置方式，需要安装cross-env</p>
<h2 id="9注意">9、注意</h2>
<p>如果想在开发过程中则可以使用上面加载网页的形式，方便实时更改预览。</p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081101755.png"></p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081102566.png"></p>
<p>上面的那种方式是直接加载localhost：5173，加载的是网页，可认为是处于开发者模式，如果想加载文件，需要进行以下配置<br>
main.js改为加载文件的方式<br>
<img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308115142710-541470761.png"><br>
更改 vite.config.ts</p>
<pre><code class="language-typescript">// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'   // 新增

// https://vitejs.dev/config/
export default defineConfig({
base: `file://${path.join(__dirname, "/dist")}`, // 新增
plugins: ,
})
</code></pre>
<p>点击打包，鼠标放在【build】上<br>
<img src="https://img2023.cnblogs.com/blog/3059241/202303/3059241-20230308115234661-1624134036.png"></p>
<p>打包后可以看到</p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081135771.png"></p>
<blockquote>
<p>但是public里的图片不显示，是路径的问题。有两种解决办法</p>
</blockquote>
<p>第一种方法：去掉路径里面的 / 即可</p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081142540.png"></p>
<p>第二种方法：直接获取文件的根目录。</p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081137695.png"></p>
<p><img src="https://test-123456-md-images.oss-cn-beijing.aliyuncs.com/img/202303081136151.png"></p><br><br>
来源：https://www.cnblogs.com/dbai/p/17190410.html
頁: [1]
查看完整版本: Electron+Vite+React搭建