Sveltekit [...slug] 動態路由在部署后返回 404 錯誤

Question

我正在開發具有動態路由的 Svelte 應用程序，在 localhost 中一切正常，用於開發和生產構建。 使用 firebase 部署構建后，除了基本路由，所有其他路由都返回 404 錯誤。

在這里，我附上了我的代碼結構

Svelte 配置 JS 文件

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({
          postcss: true,
          preserve: ['ld+json'],
        }),
      ],

    kit: {
        adapter: adapter({
            pages: 'public',
            assets: 'public',
            fallback: null,
            precompress: false
            }),
            prerender: {
            default: true
            }
    }
};

export default config;

基本路線鏈接

單擊后使用動態路徑進行路由 當啟用 Javascript 時，當我們從基本路由中單擊項目時，所有動態路徑都在工作。 如果我們正在重新加載頁面，或者當我們直接點擊這個 url 時它不起作用。

注意：在 localhost 中，我在生產和開發構建中都沒有遇到任何問題。

Answer 1

在 firebase 托管中，我們應該重寫動態鏈接的規則， 請按照以下步驟操作

"hosting": {
  // ...

  "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/"
    "dynamicLinks": true
  } ]
}

為所有路徑省略 .html 例如 /page.html -> /page

"hosting": {

  // We should add "cleanUrls" attribute within "hosting"
  "cleanUrls": true
}