SvelteKit.next 静态站点适配器页面在刷新时返回 404

Question

I know this can't be that hard, but Googling isn't turning up any answers. I'm using the SvelteKit static site adapter, and it's building the site, but the build file structure is:

root
  - _app
  - faviceon.png
  - index.html
  - secondpage.html

But, when you click on the navigation items to take you to the secondary page, the URL is: url.com/secondpage rather than url.com/secondpage.html . I'm assuming the generated JS is doing the routing here, but if you input the url directly or refresh the second page, it returns a 404.

I know this has to be a config issue, but I've tried tons of variations, and the build stays the same. This is my svelte.config.js file:

// import adapter from "@sveltejs/adapter-auto";
import adapter from "@sveltejs/adapter-static";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/lib/scss/style.scss';`,
        },
    }),

    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: "build",
            assets: "build",
            fallback: null,
            precompress: false,
            trailingSlash: 'always',
        }),
    },
};

export default config;

I initially didn't have the trailingSlash param, but the few sort of related things in docs and on StackOverflow made it seem like that might affect the routing code generation.

Anyway, let me know if you need any other code samples from me, or if just not seeing the forest for the trees.

Thanks!

Answer 1

I found the same situation, I found out that I should put a line in src/routes/+layout.js

export const trailingSlash = 'always'

Answer 2

The problem is that when there are multiple pages, the adapter-static generates several html files and expects all links to be static. The routes, even when they are static, are being treated by static-adapter as dynamic and it complains when prerender: true is set.

The adapter-static has two distinct modes of operation: SPA and prerendering. When there are several routes, both the npm run dev and npm run preview works as intended, but once built, the static routing falls to the web server who cannot found the page without the .html .

I found a workaround to avoid converting the site to a SPA: Installing a url rewrite mechanism as a middleware in order to add the .html extension that the static server is expecting in the compiled site.

For Nginx static server the solution is a url rewrite configuration as explained here: https://www.codesmite.com/article/clean-url-rewrites-using-nginx For other servers, the solution should be very similar