Electron中出现Uncaught Syntax Error: Unexpected Token <的问题排查

阿华AIGC实验室

2026-5-13

解决Electron中PHP模板抛出'Uncaught Syntax Error: Unexpected Token <'的问题

这个错误本质上是浏览器/Electron尝试解析JS/CSS文件时，拿到的却是HTML内容（比如<!DOCTYPE html>），自然会因为语法不匹配抛出错误。结合你的场景，MAMP正常但Electron出错，大概率是这两个核心原因：

1. Electron加载PHP文件的方式错误

Electron本身不具备PHP解析能力，它和普通浏览器一样，必须通过HTTP请求访问运行中的PHP服务器（也就是你的MAMP），才能得到解析后的HTML。如果你的Electron代码是直接加载本地的dashboard.php文件（比如用file:///path/to/dashboard.php），Electron会直接读取文件的原始内容（包含PHP代码和HTML标签），而不会经过MAMP的PHP解析器。这时候浏览器在加载JS/CSS时，要么把未解析的PHP+HTML内容当作脚本解析，要么资源路径指向本地文件而非MAMP服务器，导致返回HTML格式的404页面，最终触发语法错误。

解决方法：

确保Electron的主窗口加载MAMP的HTTP地址，而不是本地文件路径。比如在你的Electron主进程代码（main.js）中：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 根据你的业务需求调整是否开启Node集成
    }
  });

  // 加载MAMP运行的PHP服务地址，端口根据你的MAMP配置调整
  mainWindow.loadURL('http://localhost:8888/dashboard.php');
}

app.whenReady().then(createWindow);

2. 资源路径的相对/绝对解析差异

MAMP是HTTP服务器环境，相对路径（比如assets/css/bootstrap.min.css）会基于当前请求的URL根目录解析；但如果Electron的加载方式有问题，或者路径没有使用绝对路径，资源请求可能会指向本地文件系统而非MAMP服务器，导致服务器返回HTML格式的错误页面，被JS解析时触发错误。

解决方法：

把header.php中的资源路径改成绝对路径，确保请求指向MAMP服务器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 使用根目录绝对路径，适配HTTP环境的路径解析 -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/assets/css/fontawesome-all.min.css" type="text/css">
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.bundle.min.js"></script>
</head>
<body>

或者用PHP动态生成完整URL，适配不同环境：

<?php
// 自动获取当前服务器的域名/端口
$baseUrl = 'http://' . $_SERVER['HTTP_HOST'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<?php echo $baseUrl; ?>/assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="<?php echo $baseUrl; ?>/assets/css/fontawesome-all.min.css" type="text/css">
<script type="text/javascript" src="<?php echo $baseUrl; ?>/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $baseUrl; ?>/assets/js/bootstrap.bundle.min.js"></script>
</head>
<body>