You need to enable JavaScript to run this app.

遇到这个问题的起因

  1. 当前的前端项目需要菜单栏修改样式,样式参考另外一个项目。
  2. 这两个项目需要的 node 版本差距过大:8.17.0 18.17.0(平时我通过 nvm 快速切换 node 版本,但是现在要同时运行)
  3. 我有个远程桌面,用于部署前端项目(node 18.17.0),但是这个远程桌面只可通过 VPN 访问且外面的文件可复制进远程桌面而远程桌面的文件不能复制出来。
  4. 为什么不直接抄远程桌面的样式?因为部署的前端项目的菜单栏是水平的而我要抄的菜单栏是垂直的,两者代码除布局外其余代码一致,路由是动态路由,意味着我没网络请求就没数据即没菜单栏。
  5. 想法:本机运行 8.17.0 的项目,远程桌面运行 18.17.0 的项目,这个项目是通过开发环境启动的,不能影响生产环境的。一切准备工作搞好之后, npm run start 打开的项目就可能会报这个错误(代理没处理好引起的)

分析

我目前在网上了解到以下两种情况:

  1. 浏览器禁用 JavaScript 脚本,以谷歌为例:
    谷歌浏览器查看 JavaScript 脚本是否被禁用执行
  2. 代理问题

解决

  1. 查看是否因为禁用 JavaScript 脚本执行的原因(不太可能)
  2. 重新安装浏览器
  3. 修改前端项目的代理配置或者 nginx 的代理配置

我解决的过程

对比远程桌面上跑的本地项目和部署的项目:
本地跑的项目:
在这里插入图片描述
在这里插入图片描述
部署的项目:
在这里插入图片描述
在这里插入图片描述

通过查看前端代理配置文件和上面两个项目的请求,发现两者请求的实际地址是不一样的。
打包运行的环境不一样: npm run start 开发环境, npm run build 是生产环境,此项目最直观的表现就是基础路由不一致,但是此处的环境不需要修改,因为代理文件只配置了开发环境的基础路由,如下两图:
在这里插入图片描述
在这里插入图片描述

只要把这里的代理配置改为:

app.use(
   "/_data",
   createProxyMiddleware({
     target: "http://10.80.2.20:1615",
     changeOrigin: true,
     pathRewrite: { "^/_data": "/prod-api" },
   })
 );

成功截图

在这里插入图片描述

这是系统后端刚好正在更新导致的,不是问题:
在这里插入图片描述

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值