时间戳

首页 > 解决方案 > sapper 模板博客路由无法从部署在 netlify 上的模板呈现数据

url-routing - sapper 模板博客路由无法从部署在 netlify 上的模板呈现数据

问题描述

500 Unexpected token < in JSON at position 0访问站点/博客时会短暂显示错误组件。

在产品中：

工作。

特别是，这些代码块会导致路由失败。

index.svelte

<script context="module">
    export function preload({ params, query }) {
        return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
            return { posts };
        });
    }
</script>

index.json.js

import posts from './_posts.js';

const contents = JSON.stringify(posts.map(post => {
    return {
        title: post.title,
        slug: post.slug
    };
}));

export function get(req, res) {
    res.writeHead(200, {
        'Content-Type': 'application/json'
    });

    res.end(contents);
}

[蛞蝓].svelte

<script context="module">
    export async function preload({ params, query }) {
        const res = await this.fetch(`blog/${params.slug}.json`);
        const data = await res.json();

        if (res.status === 200) {
            return { post: data };
        } else {
            this.error(res.status, data.message);
        }
    }
</script>

很难调试，因为它需要部署，因为它在本地工作：

记录 dev 中代码的输出。

index.json.js  [
  {
    title: 'What is Sapper?',
    slug: 'what-is-sapper',
    html: '\n' +
      "<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. 
If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>\n" +      
      '\n' +
      "<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>\n" +   
      '\n' +
      '<ul>\n' +
      '\t<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>\n' + 
      '\t<li>Server-side rendering (SSR) with client-side hydration</li>\n' +
      '\t<li>Service worker for offline support, and all the PWA bells and whistles</li>\n' +
      "\t<li>The nicest development experience you've ever had, or your money back</li>\n" +
      '</ul>\n' +
      '\n' +
      "<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>\n" 
+
      '\t\t'
  },
  {
    title: 'How to use Sapper',
    slug: 'how-to-use-sapper',
    html: '\n' +
      '<h2>Step one</h2>\n' +
      "<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>\n" +
      '\n' +
      '<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app\n' +
      'cd my-app\n' +
      'npm install # or yarn!\n' +
      'npm run dev\n' +
      '</code></pre>\n' +
      '\n' +
      '<h2>Step two</h2>\n' +
      "<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>\n" +
      '\n' +
      '<h2>Step three</h2>\n' +
      '<p>...</p>\n' +
      '\n' +
      '<h2>Step four</h2>\n' +
      '<p>Resist overdone joke formats.</p>\n' +   
      '\t\t'
  },
  {
    title: 'Why the name?',
    slug: 'why-the-name',
    html: '\n' +
      '<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>\n' +
      '\n' +
      '<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>\n' +
      '\t\t'
  },
  {
    title: 'How is Sapper different from Next.js?',    slug: 'how-is-sapper-different-from-next',     
    html: '\n' +
      "<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for 
Sapper. There are a few notable differences, however:</p>\n" +
      '\n' +
      '<ul>\n' +
      "\t<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster 
and your apps are smaller</li>\n" +
      "\t<li>Instead of route masking, we encode route parameters in filenames. For example, the page 
you're looking at right now is <code>src/routes/blog/[slug].html</code></li>\n" +
      "\t<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>\n" +     
      "\t<li>Links are just <code>&lt;a&gt;</code> 
elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of 
HTML, works with the router as you'd expect.</li>\n" +
      '</ul>\n' +
      '\t\t'
  },
  {
    title: 'How can I get involved?',
    slug: 'how-can-i-get-involved',
    html: '\n' +
      "<p>We're so glad you asked! Come on over to 
the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>\n" +        
      '\t\t'
  }
]
index.svelte  [
  { title: 'What is Sapper?', slug: 'what-is-sapper' },
  { title: 'How to use Sapper', slug: 'how-to-use-sapper' },
  { title: 'Why the name?', slug: 'why-the-name' },  {
    title: 'How is Sapper different from Next.js?',    slug: 'how-is-sapper-different-from-next'      
  },
  { title: 'How can I get involved?', slug: 'how-can-i-get-involved' }
]
index.svelte  [
  { title: 'What is Sapper?', slug: 'what-is-sapper' },
  { title: 'How to use Sapper', slug: 'how-to-use-sapper' },
  { title: 'Why the name?', slug: 'why-the-name' },  {
    title: 'How is Sapper different from Next.js?',    slug: 'how-is-sapper-different-from-next'      
  },
  { title: 'How can I get involved?', slug: 'how-can-i-get-involved' }
]

标签： url-routingslugnetlifysveltesapper

解决方案

推荐阅读