JavaScript脚本仅在index.html生效，子页面Supabase数据获取报错

1. 修正script.js的import位置 #

报错“import declarations may only appear at top level of a module”，说明你的script.js里存在import语句未放在文件最顶层的情况——比如把import塞到函数内部、条件判断里，或者在import前写了console.log、变量声明之类的代码。

直接调整：把所有import语句移到script.js的最开头，确保前面没有任何代码。示例：

// 必须将import放在文件最顶层
import { supa } from '/00_setup/supabase.js';

// 其他代码全部放在import之后
document.addEventListener('DOMContentLoaded', async () => {
  console.log('DOM加载完成');
  await getUsername();
});

async function getUsername() {
  // 你的查询逻辑
}

2. 替换脚本路径为根目录绝对路径 #

子页面在views文件夹下，虽然引入script.js的../script.js路径正确，但script.js里导入supa的相对路径可能适配不了子页面层级。比如原路径是./00_setup/supabase.js，子页面加载时会去views/00_setup/找文件，必然找不到。

改成根目录绝对路径即可解决：

import { supa } from '/00_setup/supabase.js';

不管是首页还是子页面，都会从网站根目录加载supabase.js，不会出现路径错误。

3. 检查子页面的目标DOM元素 #

首页能输出异步函数日志，子页面只有加载日志，大概率是子页面里没有你要更新的h1标签，或者标签id不匹配，导致getUsername函数执行到更新元素步骤时找不到节点，没触发后续日志。

先确认子页面HTML里存在对应元素，比如<h1 id="username"></h1>，然后在函数里增加元素存在性判断：

async function getUsername() {
  const { data, error } = await supa.from('users').select('username').eq('userId', '你的用户ID');
  if (error) {
    console.error('查询失败:', error);
    return;
  }
  const usernameEl = document.getElementById('username');
  if (usernameEl) {
    usernameEl.innerHTML = data[0].username;
    console.log('用户名更新成功');
  } else {
    console.warn('找不到显示用户名的元素');
  }
}

4. 清除浏览器缓存，避免旧脚本干扰 #

浏览器会缓存模块脚本，可能子页面加载的是旧版本的script.js，导致修改未生效。解决方式：

• 打开浏览器控制台的Network选项卡，勾选“禁用缓存”后刷新子页面
• 或者给脚本添加版本参数，比如<script src="../script.js?v=2" type="module"></script>

内容的提问来源于stack exchange，提问作者y-neck