Plain Vanilla JS+CapacitorJS插件调用失败、本地资源加载报错问题

核心报错根因 #

你碰到的插件调用失败、本地资源404两个问题，都是基础配置和代码写法错误导致的，没有复杂的环境问题。 #

1. Capacitor插件调用报错修复 #

控制台抛出的SyntaxError: Unexpected identifier 'Device'由三个问题叠加导致：

• HTML结构完全不符合规范：你把script标签放在了<head>标签外部、甚至HTML文档最开头，浏览器/WebView解析顺序完全错乱。
• 配置文件写法错误：你把TS格式的配置代码（import语句、类型标注、export语法）写进了capacitor.config.json文件，JSON格式不支持上述语法，会导致配置读取失败。
• 插件引用、语法错误：Capacitor 3+版本的插件不会自动挂载到全局作用域，你没有正确引入Device插件就直接调用；同时await关键字只能在async修饰的函数内使用，你的点击回调没有加async修饰，直接触发语法错误。

修复操作 #

首先修正capacitor.config.json，删除所有非JSON语法的内容，仅保留静态配置：

{
  "appId": "com.zenithapp.app",
  "appName": "Zenith Mobile App",
  "webDir": "www",
  "bundledWebRuntime": true
}

然后重写index.html，修正文档结构，正确引用插件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capacitor Base Project</title>
  <!-- 本地jQuery放入www目录后用相对路径引用 -->
  <script src="./js/jquery-3.6.0.min.js"></script>
  <!-- 开启bundledWebRuntime后直接引用核心运行时文件 -->
  <script src="./capacitor.js"></script>
</head>
<body>
  <button id="button" style="width:500px; height:500px; background-color:gold;">TEST</button>

  <script>
    // 从Capacitor全局对象上获取Device插件实例
    const { Device } = Capacitor.Plugins;

    // 回调加async修饰才能使用await
    $("#button").on("click", async (event) => {
      const info = await Device.getInfo();
      console.log(info);
      alert(`设备信息：\n${JSON.stringify(info, null, 2)}`);
    })
  </script>
</body>
</html>

2. 本地资源加载404修复 #

本地资源报capacitor://localhost路径找不到的问题，核心原因有两个：

• 资源存放路径或引用路径错误：你配置的webDir为www目录，Capacitor WebView的站点根路径直接映射到项目下的www文件夹，所有本地静态资源必须放在这个目录下，引用时用相对路径（./开头）即可，不要手动写localhost://开头的绝对路径。
• 资源未同步到原生工程：每次修改www目录下的文件后，必须执行同步命令把资源复制到Android、iOS的原生工程目录，否则原生包内还是旧版本的资源，新放的文件自然找不到。

修复操作 #

• 把所有本地静态文件（jQuery、自定义JS/CSS、图片等）全部移入www目录，按文件夹分类存放，引用时写对相对路径，比如放在www/js/下的jQuery就引用./js/jquery-3.6.0.min.js。
• 每次修改web侧代码后，执行npx cap copy命令把最新资源同步到双平台原生工程。
• 如果你用的是Capacitor 3及以上版本，bundledWebRuntime配置已经废弃，可以直接执行npm i @capacitor/core @capacitor/device安装依赖，再执行npx cap sync完成全量同步，不需要手动引入capacitor.js文件。

最终验证步骤 #

• 执行npx cap copy同步最新web资源
• 执行npx cap open android或npx cap open ios打开对应原生IDE
• 重新编译运行到模拟器，点击TEST按钮即可看到设备信息弹窗，本地jQuery也会正常加载

内容的提问来源于stack exchange，提问作者DEREKKASTA99