创建electron+vite+vue+express项目

创建electron+vite+vue项目

create-electron-vite TestProject

运行效果如图所示：
cd TestProject
进入项目根目录后，执行项目依赖包安装指令

npm install

运行结果如下：

执行依赖性安装失败

可能是由于下载源有问题，更换下载源即可。操作如下：
找到 C:\Users\用户名.npmrc 文件，该文件为隐藏文件。在文件末尾加入此段代码

electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_custom_dir={
   {
    version }}
electron_mirror=https://cdn.npmmirror.com/binaries/electron/v
registry=https://registry.npmmirror.com/

如下图所示：

项目打包

npm run build

如果打包过程中报错，找不到打包工具，则手动下载打包工具即可。
参考此文章
https://blog.youkuaiyun.com/qq_45897239/article/details/138490747?spm=1001.2014.3001.5502
或者直接去此处下载
https://download.youkuaiyun.com/download/qq_17129291/89772698
（下载前注意报错提示的版本与此资源描述版本是否一致），下载后将文件解压，直接放在C:\Users\用户名\AppData\Local文件夹下。如图：

加入express

安装express及相关依赖包

npm install express cors morgan cookie-parser get-port axios

在项目根目录加server文件夹

其中app.ts内容如下：

var express = require('express');
var appPath = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');

// 加载路由文件
const indexRouter = require(appPath.join(__dirname,'./routes/index.ts'));

var app = express();

// 解决跨域
app.use(cors());

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
    extended: false }));
app.use(cookieParser());

app.use('/api/index', indexRouter);

// ----------------------
const http = require("http");
const server = http.createServer(app);
// var port = normalizePort(process.env.PORT || "3000");

// 导出启动服务器的函数