将Apple Pay SDK导入Vite打包项目时出现错误

问题根源 #

Apple Pay官方SDK代码中存在依赖自身加载脚本（<script>标签）src属性的逻辑，比如验证脚本来源或加载关联资源。当你将SDK下载到本地并通过import导入时，这段逻辑找不到对应的独立<script>标签（import会将代码打包进bundle，没有单独的script标签上下文），因此抛出null读取错误。

解决方案 #

方案1：动态创建<script>标签加载本地SDK

通过动态生成script标签的方式加载本地SDK，让代码能找到对应的script标签：

• 建议将SDK文件移至项目的public目录（比如public/sdk/apple-pay-sdk.js），该目录下的文件会被直接复制到打包根目录，路径更稳定。
• 在main.ts中用以下代码替换原有的import语句：

const loadApplePaySDK = () => {
  const script = document.createElement('script');
  // 路径根据SDK实际存放位置调整，public目录下直接用根路径开头
  script.src = '/sdk/apple-pay-sdk.js';
  script.onload = () => {
    // 可在这里编写SDK加载完成后的初始化逻辑
  };
  document.head.appendChild(script);
};

// 页面加载完成后执行加载
if (document.readyState === 'complete') {
  loadApplePaySDK();
} else {
  window.addEventListener('load', loadApplePaySDK);
}

方案2：直接使用官方CDN加载（最稳妥）

放弃本地下载，直接在项目的index.html中添加CDN脚本标签，让SDK以原生方式加载：

<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>

这种方式完全符合SDK的设计逻辑，不会出现标签找不到的问题，还能自动同步官方更新。

方案3：修改本地SDK代码（不推荐）

找到SDK中读取script标签src的代码段（通常是document.currentScript.src或类似选择器逻辑），添加空值判断或替换为固定路径：

// 原代码可能类似：
// const scriptSrc = document.currentScript.src;

// 修改为：
const script = document.currentScript || document.querySelector('script[src*="apple-pay-sdk"]');
const scriptSrc = script ? script.src : '/sdk/apple-pay-sdk.js';

缺点：官方SDK更新后需要重新修改，可能破坏原有功能逻辑，仅作为临时应急方案。

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