likes
comments
collection
share

electron+react+vite项目部署白屏问题解决和不完全记录

作者站长头像
站长
· 阅读数 40

写于 2023.3 这段时间和朋友组队打比赛需要用写个桌面端应用，以前用过electron进行了一些小尝试，也熟悉react，就决定用electron+react+vite来写了。

为什么不用tarui？ 太懒了暂时不想学..

为什么不用flutter？ 因为另一个项目在用flutter写

这篇文章只对vite创建的react应用的模板结合electron（套壳）进行了记录，所以并不太完全 步骤稍显繁琐，恳请各位大佬指正

创建react应用

这里只需要使用经典的vite创建步骤即可

npm create vite ./
npm install
vite

检查创建成功即可，vite默认的是5173端口 可以在vite.config.js的属性中添加属性修改

 server:{
        port:3000
    }

安装electron

也是根据electron文档进行安装即可 electron文档 在现在的node版本（19.7.0）和electron版本（23.1.2，forge 6.0.5）下安装已经不会遇到太多问题，npm用阿里的镜像就好了。需要注意的就是路径必须全英文，package.json中必须有 "author"，"description"两个属性

npm install --save-dev electron

//按照官网写好文件后
npm install --save-dev @electron-forge/cli
npx electron-forge import

成功安装即可

修改main.js

把createWindow修改成下的养足，实际上就是加入了判断生产和开发环境的代码，选择加载本地端口的react应用还是打包后的应用。

function createWindow() {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, "preload.js"),
		},
	});

	// 加载 React 应用
	if (process.env.NODE_ENV === "development") {
		win.loadURL("http://localhost:5173");
        win.webContents.openDevTools();
	} else {
        console.log('in prod',__dirname)
        win.loadFile(path.join(__dirname, 'dist', 'index.html'))
	}
}

使用npm run build 启动的vite生产环境构建输出目录即为生产环境的electron装载目录,也可以修改vite配置文件来自定义。

 build: {
    outDir: '../dist'
  }

热更新（可选）

安装electron-reloader

npm install  --save-dev electron-reloader

在main.js 添加

if (process.env.NODE_ENV === 'development') {
    require('electron-reloader')(module);
  }

问题解决

启动报错

此时，当使用 npm run start（electron-forge start）时候，很可能就出现下面的错误 electron+react+vite项目部署白屏问题解决和不完全记录

此时只需要在package.json内添加   "main": "main.js" 即可，进行指定electron入口文件

指定node环境

需要 cross-env包，安装后在package.json中把scripts修改为如下的的代码片段

development分别是react和electron的开发环境启动

production则是vite构建react，electron的生产环境启动，生产环境打包

 "scripts": {
        "dev": "cross-env NODE_ENV=development vite",
        "start": "cross-env NODE_ENV=development electron-forge start",
        "build": "cross-env NODE_ENV=production vite build",
        "prod-start":"cross-env NODE_ENV=production electron-forge start",
        "preview": "vite preview",
        "package": "electron-forge package",
        "make": "cross-env NODE_ENV=production electron-forge make"
    },

此时，就可以使用下面的命令进行开发调试

npm run dev
npm run start

用下面的命令进项生产环境调试和打包

npm run build
npm run prod-start

//打包
npm run make

没有react的UI结果

此时应该可以正常启动开发环境的electron配置了

但是在生产环境下，可能会出现包括但不限于白屏，内容不是react等情况

此时对index.html，应为如下的内容。关键在于创建了root节点并通过script引入react文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My React App</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

</html>

此时，仍有可能继续出现白屏，打开控制台可以发现是404的找不到文件路径错误。

若确定了electron的main.js没有问题，就需要修改vite.config.js，添加base:'./'，来指定vite build出的文件中html使用相对寻址保证文件路径正确寻找。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base:'./',
})

此时你会发现vite的图标显示不出来，只需要在App.jsx文件里进行如下的相对路径修改

 // <img src="/vite.svg" className="logo" alt="Vite logo" />
    <img src="./vite.svg" className="logo" alt="Vite logo" />

总结

electron+react+vite项目部署并不困难，我的做法总体感觉上相对繁琐，属于是抛砖引玉了。

本次部署遇到的问题主要是寻址问题，electron通过main.js文件入口，修改了vite build后的react项目的index.html文件的寻址地址，从而导致了一些奇怪的问题。

转载自:https://juejin.cn/post/7206977593587826743
评论
请登录