SvelteKit+Vite开发模式下page store订阅偶现空对象问题

针对你遇到的Vite开发服务器+Cloudflare隧道环境下，page store订阅有时返回空对象的问题，以下是几个实用的排查和解决方法：

• 优先使用$page自动订阅语法
  手动调用subscribe容易因时机问题导致竞态，SvelteKit的自动订阅语法会自动处理store的初始化和更新，可靠性更高。直接在组件中使用$page即可，无需手动订阅：

  <script>
    import { page } from '$app/stores';
  </script>
  
  {#if $page.url}
    <p>当前页面路径：{$page.url.pathname}</p>
  {/if}
  

• 通过await page等待store初始化完成
  如果必须手动处理，可以通过await page语法等待page store完成数据加载，确保获取到非空对象：

  <script>
    import { page } from '$app/stores';
    let currentPage;
  
    async function loadPageData() {
      currentPage = await page;
    }
  
    loadPageData();
  </script>
  
  {#if currentPage}
    <!-- 基于currentPage渲染内容 -->
  {/if}
  

• 调整Cloudflare隧道的缓存规则
  Cloudflare的边缘缓存可能会干扰开发模式的资源加载，导致旧的空page数据被缓存。给你的开发域名添加缓存规则，设置为缓存级别：忽略缓存，强制所有请求直接回源到本地Vite服务器。

• 禁用Vite开发服务器缓存
  Vite的预构建缓存偶尔会引发资源加载异常，尝试在vite.config.js中禁用开发服务器缓存：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit()],
    server: {
      cache: false
    }
  });
  

  或者直接删除项目根目录下的node_modules/.vite缓存文件夹，重新启动开发服务器。

• 检查路由组件的加载顺序
  若在嵌套组件或子路由中订阅page store，确保父布局或页面已经完成page数据的加载。可以在+layout.svelte中先处理page数据，再通过props传递给子组件，避免子组件提前订阅未初始化的store。

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