本地服务器配置说明

概述

本项目支持使用 Express + http-proxy-middleware 启动本地 HTTP 服务器来加载 Vue2/Vue3 打包后的 dist 文件，并提供强大的 API 代理功能。

配置方式

1. 基础配置

在 resources/config/config.ini 中设置加载模式：

# 加载模式：remote(远程URL) 或 local(本地服务器)
loadMode="local"

# 本地资源路径（相对于 resources 目录）
localWebPath="/resources/web"

# 远程URL（作为备用，当本地加载失败时使用）
electronUrl="https://liumingxin.site"

2. 代理规则配置

在 resources/config/config.ini 中添加 proxyRules 配置（JSON 格式）：

# 代理规则配置（支持多个代理）
proxyRules='[
  {
    "context": "/api",
    "target": "https://api.example.com",
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" }
  },
  {
    "context": "/upload",
    "target": "https://upload.example.com",
    "changeOrigin": true
  },
  {
    "context": "/resources",
    "target": "https://resource.example.com",
    "changeOrigin": true
  }
]'

3. 完整配置示例

electronTitle="vue3-simple-electron"
loadMode="local"
localWebPath="/resources/web"
electronUrl="https://liumingxin.site"

# 代理规则（JSON 数组格式）
proxyRules='[
  {
    "context": "/api",
    "target": "https://api.example.com",
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" },
    "timeout": 30000
  },
  {
    "context": "/upload",
    "target": "https://upload.example.com",
    "changeOrigin": true
  },
  {
    "context": "/file",
    "target": "http://file-server.com:8080",
    "changeOrigin": true,
    "pathRewrite": { "^/file": "/files" }
  }
]'

version="V1.0.0"
# ... 其他配置

代理规则说明

字段说明

字段	类型	必填	说明	默认值
context	string	✅	代理前缀路径，如 /api	-
target	string	✅	目标服务器地址	-
changeOrigin	boolean	❌	是否更改 Origin 头	true
pathRewrite	object	❌	路径重写规则	{}
ws	boolean	❌	是否代理 WebSocket	false
timeout	number	❌	请求超时时间（毫秒）	30000

示例场景

场景 1：API 代理

{
  "context": "/api",
  "target": "https://api.example.com",
  "changeOrigin": true,
  "pathRewrite": { "^/api": "" }
}

请求转换：

前端请求：http://127.0.0.1:xxxx/api/user/info
实际请求：https://api.example.com/user/info

场景 2：文件上传

{
  "context": "/upload",
  "target": "https://upload.example.com",
  "changeOrigin": true
}

请求转换：

前端请求：http://127.0.0.1:xxxx/upload/image
实际请求：https://upload.example.com/upload/image

场景 3：WebSocket 代理

{
  "context": "/ws",
  "target": "wss://ws.example.com",
  "changeOrigin": true,
  "ws": true
}

场景 4：路径重写

{
  "context": "/file",
  "target": "http://file-server.com:8080",
  "pathRewrite": { "^/file": "/api/files" }
}

请求转换：

前端请求：http://127.0.0.1:xxxx/file/document.pdf
实际请求：http://file-server.com:8080/api/files/document.pdf

前端配置

Vue3 项目

vite.config.js

export default {
  base: './', // 使用相对路径
  build: {
    outDir: 'dist',
  },
};

axios 配置

// utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: '/api', // 对应代理的 context
  timeout: 30000,
});

export default service;

Vue2 项目

vue.config.js

module.exports = {
  publicPath: './', // 重要！使用相对路径
  outputDir: 'dist',
  productionSourceMap: false,
};

axios 配置

// utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: '/api', // 对应代理的 context
  timeout: 30000,
});

export default service;

部署流程

1. 前端项目打包

# Vue3 项目
npm run build

# Vue2 项目
npm run build

2. 复制到 Electron 项目

# 复制 dist 文件到 resources/web
cp -r dist/* /path/to/electron-project/resources/web/

3. 配置加载模式

编辑 resources/config/config.ini：

loadMode="local"
localWebPath="/resources/web"

4. 配置代理规则（如需要）

proxyRules='[{"context": "/api", "target": "https://your-api-server.com", "changeOrigin": true}]'

5. 启动 Electron

npm run dev
# 或打包
npm run build

注意事项

✅ 支持的框架

• ✅ Vue2
• ✅ Vue3
• ✅ React
• ✅ Angular
• ✅ Svelte
• ✅ 纯 HTML/JS

⚠️ 常见问题

1. 资源加载 404

   • 检查 publicPath 或 base 是否设置为 ./
   • 检查 localWebPath 配置是否正确

2. 代理不生效

   • 检查 proxyRules JSON 格式是否正确
   • 检查 context 是否与前端请求路径匹配

3. CORS 错误

   • 确保 changeOrigin: true
   • 检查目标服务器是否允许跨域

4. 路由 404

   • 确保使用 History 模式，本地服务器会自动处理
   • Hash 模式无需特殊配置

日志查看

启动后查看日志输出：

========================================
本地 Express 服务器启动成功
服务地址: http://127.0.0.1:xxxxx
静态目录: /path/to/resources/web
配置代理规则 (2 个):
  1. /api → https://api.example.com (重写: {"^/api":""})
  2. /upload → https://upload.example.com
========================================

高级配置

自定义超时时间

{
  "context": "/api",
  "target": "https://api.example.com",
  "timeout": 60000 // 60 秒
}

请求头修改

{
  "context": "/api",
  "target": "https://api.example.com",
  "headers": {
    "X-Custom-Header": "value"
  }
}

多域名代理

[
  {
    "context": "/api/v1",
    "target": "https://api-v1.example.com",
    "pathRewrite": { "^/api/v1": "" }
  },
  {
    "context": "/api/v2",
    "target": "https://api-v2.example.com",
    "pathRewrite": { "^/api/v2": "" }
  }
]

性能优化

1. 缓存策略：静态资源默认禁用缓存（开发环境）
2. 端口自动分配：自动选择可用端口，避免冲突
3. CORS 优化：自动添加 CORS 头，无需后端配置

安全建议

1. 本地服务器仅监听 127.0.0.1，不对外暴露
2. 生产环境建议使用 HTTPS 代理目标
3. 敏感信息不要写在配置文件中，使用环境变量

---

需要帮助？ 查看日志文件或联系技术支持。