ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.4k stars 8.14k forks source link

🧐[问题 | question] 通过nginx重新部署后,访问修改过的路由文件会loading,刷新后恢复正常 #10574

Closed cuiliming666 closed 1 year ago

cuiliming666 commented 1 year ago

版本:antdpro V5 问题: 配置了hash,nginx也配置了不缓存,但是还是有问题 image image

报错:这种情况时遇到过两种报错

  1. [@umijs/runtime] load component failed ChunkLoadError: Loading chunk ... failed.
  2. Uncaught SyntaxError: Unexpected token '<'

请问下大佬怎样能解决

chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。

首先,这个问题并不是涉及到具体的 React 相关的问题,而是与 webpack 打包和 Nginx 配置相关的问题。所以需要你提供更多的配置信息才能进行问题解决。

根据你提供的错误信息,第一种错误 ChunkLoadError 可能是由于前端资源没有正确地加载,导致 chunk 无法正确加载造成的,可能是由于前端路由使用了按需加载(动态 import)的方式,而没有正确地配置 webpack 的 output.publicPath 字段,导致 chunk 加载失败。

你可以尝试在 webpack 配置文件中添加如下代码:

output: {
  publicPath: '/',
},

这样做可以确保 webpack 在按需加载 chunk 的时候路径的正确性。同时也需要在 Nginx 的配置文件中,添加对应的 publicPath,例如:

location / {
    root /path/to/project;
    index index.html;
}

location ~* \.(js|css|png|jpg|jpeg|gif|svg)$ {
    root /path/to/project/dist;
    expires 1d;
    access_log off;
    add_header Cache-Control "public, max-age=86400, immutable";
}

这样做可以确保浏览器的缓存问题,同时也可以减少资源加载时间。

另外,第二个错误 Uncaught SyntaxError: Unexpected token '<' 可能是由于前端路由刷新后直接访问到了 HTML 文件而非 JavaScript 文件,可以在 Nginx 的配置文件中添加如下规则:

location / {
    try_files $uri /index.html;
}

这样做可以确保浏览器访问任何路径时都是返回 index.html 文件,而前端路由可以通过 history API 来控制页面的显示和隐藏。

综上所述,你需要检查 webpack 的配置是否正确、Nginx 的配置是否正确,并且对资源的缓存和路由的配置进行详细地检查和调试。