umi@4 模板项目配置nginx转发后页面不断刷新的问题

umi@4 模板项目配置nginx转发后页面不断刷新的问题

启动umi@4基于antd-design-pro模板项目的开发环境之后,得到的信息如下:

pnpm max dev
info  - [你知道吗?] 如果你需要使用 Jest 来测试 Umi 项目, max g jest 就可以一键完成配置,详见 https://umijs.org/docs/guides/generator#jest-%E9%85%8D%E7%BD%AE%E7%94%9F%E6%88%90%E5%99%A8
info  - Umi v4.0.49
info  - Preparing...
info  - MFSU eager strategy enabled
info  - [MFSU][eager] restored cache
event - [MFSU][eager] start build deps
info  - [MFSU] skip buildDeps
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:                                  ║
        ║  >   Local: http://localhost:8001                  ║
ready - ║  > Network: http://10.82.68.28:8001                ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ ║
        ╚════════════════════════════════════════════════════╝
info  - [MFSU][eager] worker init, takes 899ms
event - [Webpack] Compiled in 1455 ms (399 modules)
wait  - [Webpack] Compiling...
event - [MFSU][eager] start build deps
info  - [MFSU] skip buildDeps
event - [Webpack] Compiled in 50 ms (361 modules)

上面的信息表明开发环境开在了8001端口上。 与之对应的nginx配置

server {
          
   
        listen 7100;
        location / {
          
   
                proxy_pass http://127.0.0.1:8001;
        }
}

解决方法

在项目的根目录(和src同级的目录)创建一个.env.local的文件,用于控制开发时的环境变量,该文件默认在.gitignore当中。 在.env.local中添加以下一行:

SOCKET_SERVER=http://10.82.68.28:8001/

即指定一个和开发服务器地址相同的SOCKET_SERVER环境变量,即能解决问题。

经验分享 程序员 微信小程序 职场和发展