UI 看起来与部署的网站不同

【问题标题】：UI looks different from the deployed websiteUI 看起来与部署的网站不同
【发布时间】：2022-01-11 06:53:23
【问题描述】：

我是一名初级前端开发人员。我最近为开源克隆了一个 github 存储库（抱歉无法提供链接）并使用 docker 运行它。当我在 localhost 上加载 UI 时，只显示了已部署网站上的一些功能，但是当我在 chrome 上使用开发人员工具时，没有错误，控制台中也没有任何内容。当我点击主页上显示的链接时，我 the following error popped up for a few seconds 并再次检查控制台时，我看到了以下错误

route-loader.js?361d:91 GET http://localhost:3000/_next/static/chunks/pages/%5Bslug%5D.js net::ERR_ABORTED 404 (Not Found)
eval @ route-loader.js:113
appendScript @ route-loader.js:96
maybeExecuteScript @ route-loader.js:210
eval @ route-loader.js:267
Promise.then (async)
eval @ route-loader.js:264
withFuture @ route-loader.js:47
loadRoute @ route-loader.js:263
loadPage @ page-loader.js:126
_callee5$ @ router.js:1381
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
fetchComponent @ router.js:1411
_callee3$ @ router.js:1098
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
getRouteInfo @ router.js:1166
_callee$ @ router.js:791
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
change @ router.js:921
push @ router.js:533
instance.<computed> @ router.js:167
linkClicked @ link.js:67
onClick @ link.js:233
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
eval @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22391
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22408
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
route-loader.js:104 Uncaught (in promise) Error: Failed to load script: /_next/static/chunks/pages/%5Bslug%5D.js
    at HTMLScriptElement.script.onerror (route-loader.js:104:36)
script.onerror @ route-loader.js:104
error (async)
eval @ route-loader.js:103
appendScript @ route-loader.js:96
maybeExecuteScript @ route-loader.js:210
eval @ route-loader.js:267
Promise.then (async)
eval @ route-loader.js:264
withFuture @ route-loader.js:47
loadRoute @ route-loader.js:263
loadPage @ page-loader.js:126
_callee5$ @ router.js:1381
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
fetchComponent @ router.js:1411
_callee3$ @ router.js:1098
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
getRouteInfo @ router.js:1166
_callee$ @ router.js:791
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
change @ router.js:921
push @ router.js:533
instance.<computed> @ router.js:167
linkClicked @ link.js:67
onClick @ link.js:233
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
eval @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22391
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22408
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
Navigated to http://localhost:3000/bush-point

很抱歉，如果这含糊不清，但可能是什么问题？只要不泄露开源存储库是什么，我很乐意提供更多信息。或者，感谢任何调试建议！

编辑： 我按照目录 _next/static/chunks/pages 并没有看到 [slug].js 文件： my directory

编辑2： 我的页面看起来像 this，而它应该看起来像 this

【问题讨论】：

  • 当您说“错误弹出几秒钟...我看到以下错误”时，您似乎实际上并未包含该错误。您能否编辑问题以包含错误的文本（不是屏幕截图也不是链接，在问题中包含内联文本）以及重现问题所需的任何代码？
  • @DavidMaze 嗨！我编辑了问题以在第二张图片中包含错误消息，不幸的是我无法获得第一张图片的文本，因为弹出窗口太快以至于它消失并转换到另一个我没有时间的网页复制它。任何帮助表示赞赏！
  • 如何重现该问题？有东西试图获取一个不存在的脚本，但只有 HTTP 404 消息很难说更多。
  • 这是一个公开的 docker 镜像吗？我们可以获取图像名称以便最终重现它吗？
  • @tsamridh86 docker 镜像是公开的：hub.docker.com/r/orcasound/orcasite。如果您能帮我重现该问题，我将不胜感激！

标签： docker user-interface debugging github next.js


【解决方案1】：

看起来您已将您的 pages/ 文件之一命名为 [slug].js（或者至少这是它的评估结果 - 请参阅 %5Bslug%5D

如果没有，请发布您的 pages 目录的内容。

解决：重命名文件或删除相应文件并重新运行构建。

【讨论】：

  • 我按照目录 _next/static/chunks/pages 并没有看到 [slug].js 文件。我更新了上面目录的截图：(
  • 在本地直接克隆 dev 和 prod 构建部署正常，您还看到这个问题吗？
  • 您的网页是否看起来像我在编辑 2 中放置的正确屏幕截图？如果是这样，我可以告诉你我是如何得到我的，看看你能不能帮忙？谢谢！
  • 否则，如果你的网页和我的一样，能不能也告诉我一下？
  • 看起来像这样 - cln.sh/ImxFKI - 您的屏幕截图 1 和 2 似乎不是来自同一条路线，您是否希望菜单居中等？您希望匹配哪些特定元素？
猜你喜欢
  • 2011-07-07
  • 2021-12-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode