zeit/now 上的 svelte/sapper 直接链接问题 - 如何调试或修复？

Question

在开发中，我可以直接链接到任何路由。在 Zeit/now 上，我可以将链接指向某些页面，但不能指向其他页面。我正在努力确定问题所在。

这是一个示例，直接导航到“https://partyshoegame.now.sh/games/play/Sparkle”不起作用，但从主页导航到同一位置却起作用。

Zeit 运行时日志没有任何条目。

也许是我有 Firebase 内容的页面？我通过 RXJS/RXfire 使用 firebase auth，通过谷歌的 API 使用 firestore。

我断言我已经尝试过的事情:

链接深度:我的内容有两层深。我拉了一些到只有一层深，但这并没有什么不同。

Slugs:我有博客示例和我的内容。博客有用，我的不行。

我的 Helper js 代码:我在 routes 文件夹中有几个没有下划线名称的 js 文件。我想也许是那些导致了路线问题。我添加了下划线，没有区别。

Slugs #2:我放置了一个两层深的命名文件。无法直接访问它没有索引？:我的一些路线只有 [slug].svelte。我添加了 index.svelte。没有区别。

问题 #3:我的文件名为 [playDocId].svelte，然后我使用了 params.playDocId。我将它们切换为 [slug]。没有区别

应用程序服务器:将 polka 切换为 express。没有区别

我的路线文件夹的片段

routes
 > blog
  > games
   > play
    [playDocId].svelte
   > edit
     [editDocId]-svelte

screenshot of my routes folder

服务器响应

`在开发中，我可以直接链接到任何路线。在 Zeit/now 上，我可以将链接指向某些页面，但不能指向其他页面。我正在努力确定问题所在。

这是一个示例，直接导航到“https://partyshoegame.now.sh/games/play/Sparkle”不起作用，但从主页导航到同一位置却起作用。

Zeit 运行时日志没有任何条目。

也许是我有 Firebase 内容的页面？我通过 RXJS/RXfire 使用 firebase auth，通过谷歌的 API 使用 firestore。

我断言我已经尝试过的事情:

链接深度:我的内容有两层深。我拉了一些到只有一层深，但这并没有什么不同。

Slugs:我有博客示例和我的内容。博客有用，我的不行。

我的 Helper js 代码:我在 routes 文件夹中有几个没有下划线名称的 js 文件。我想也许是那些导致了路线问题。我添加了下划线，没有区别。

Slugs #2:我放置了一个两层深的命名文件。无法直接访问它没有索引？:我的一些路线只有 [slug].svelte。我添加了 index.svelte。没有区别。

问题 #3:我的文件名为 [playDocId].svelte，然后我使用了 params.playDocId。我将它们切换为 [slug]。没有区别

应用程序服务器:将 polka 切换为 express。没有区别

我的路线文件夹的片段

routes
 > blog
  > games
   > play
    [playDocId].svelte
   > edit
     [editDocId]-svelte

screenshot of my routes folder

服务器响应

` 找不到该页面。

The page could not be found in the application.

404: NOT_FOUND
>Code: RESOURCE_NOT_FOUND
ID: cle1:mb46h-1573325573258-8bd73af71130

`

screenshot of error page

---

package.json


{
"name": "partyshoegame",
"description": "Party Shoe Game",
"version": "0.0.1",
"license": "UNLICENSED",
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --legacy",
"zeit": "sapper export --legacy && now --prod && sapper dev",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"@firebase/app": "^0.4.19",
"body-parser": "^1.19.0",
"bulma": "^0.8.0",
"bulma-extensions": "^6.2.7",
"compression": "^1.7.1",
"date-fns": "^2.5.1",
"date-fns-tz": "^1.0.8",
"express": "^4.17.1",
"firebase": "^7.2.0",
"firebaseui": "^4.2.0",
"helmet": "^3.21.2",
"lazysizes": "^5.1.2",
"polka": "^1.0.0-next.7",
"rxfire": "^3.8.7",
"rxjs": "^6.5.3",
"sirv": "^0.4.0",
"uuid": "^3.3.3",
"uuid-random": "^1.3.0",
"xmlhttprequest": "^1.8.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"npm-run-all": "^4.1.5",
"rollup": "^1.12.0",
"rollup-plugin-babel": "^4.0.2",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-terser": "^4.0.4",
"sapper": "^0.27.0",
"svelte": "^3.0.0"
},
"main": "main.js",
"repository": "https://github.com/ketupia/psg-firebase",
"author": "Ketupia <ketupia@gmail.com>",
"private": true
}


构建过程

1. npm 运行导出
2. 提交到github

3. zeit/now自动拉取

   或

“npm run zeit”是 sapper 导出并推送到现在。

2 : /image/0tRuu.pngThe找不到页面。

无法在应用程序中找到该页面。

404:NOT_FOUND

Code: RESOURCE_NOT_FOUND ID: cle1:mb46h-1573325573258-8bd73af71130 `

screenshot of error page

---

package.json


{
"name": "partyshoegame",
"description": "Party Shoe Game",
"version": "0.0.1",
"license": "UNLICENSED",
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --legacy",
"zeit": "sapper export --legacy && now --prod && sapper dev",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"@firebase/app": "^0.4.19",
"body-parser": "^1.19.0",
"bulma": "^0.8.0",
"bulma-extensions": "^6.2.7",
"compression": "^1.7.1",
"date-fns": "^2.5.1",
"date-fns-tz": "^1.0.8",
"express": "^4.17.1",
"firebase": "^7.2.0",
"firebaseui": "^4.2.0",
"helmet": "^3.21.2",
"lazysizes": "^5.1.2",
"polka": "^1.0.0-next.7",
"rxfire": "^3.8.7",
"rxjs": "^6.5.3",
"sirv": "^0.4.0",
"uuid": "^3.3.3",
"uuid-random": "^1.3.0",
"xmlhttprequest": "^1.8.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"npm-run-all": "^4.1.5",
"rollup": "^1.12.0",
"rollup-plugin-babel": "^4.0.2",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-terser": "^4.0.4",
"sapper": "^0.27.0",
"svelte": "^3.0.0"
},
"main": "main.js",
"repository": "https://github.com/ketupia/psg-firebase",
"author": "Ketupia <ketupia@gmail.com>",
"private": true
}


构建过程

1. npm 运行导出
2. 提交到github

3. zeit/now自动拉取

   或

“npm run zeit”是 sapper 导出并推送到现在。

Answer 1

遇到 Netlify 的这个问题。

问题的快速总结:

• 转到 www.example.com，然后单击 /products 会将您带到 www.example.com/products。
• 直接转到 www.example.com/products 会导致 404。

解决方案:

将所有 URL 重定向到 index.html。

实现:

Zeit:添加一个 404 页面并将其重定向到您的 index.html。

Netlify:将名为 _redirects(无扩展名)的新文件添加到您的发布目录(位于部署设置下)。
将这一行添加到 _redirects:/*/index.html 200

From the Netlify docs:

This will effectively serve the index.html instead of giving a 404 no matter what URL the browser requests