Vue3项目部署到服务器点击菜单就卡死

记录一下在做项目时出现的问题:
情况是这样,我做完路由动态添加时,控制台会就出现组件递归超出最大更新的问题

 一开始我是怀疑是不是我在转换后端数据动态注册是那里有个递归的逻辑,代码修改了很多次都还是没有找到解决问题的点。就在昨晚疯狂百度的时候,看到几篇类似我问题的,发现他们的问题都说是在组件中的v-for 没有定义好key(唯一值) 或者 v-if(使用了函数)等影响到这个递归更新问题。感觉靠谱,我就立马去检查了自己的代码,发现只有在v-if中使用了一个函数,然后在这个函数里,在不同的逻辑中log,发现其中一个log一直在无限循环,最后把这个代码和问题去问AI,AI给出的问题点是因为我代码中使用了一个响应式的数据,一旦改变就会触发组件更新,建议我使用普通定义来接受数据,我修改后,终于好了!!部署到服务器也不会崩了。


let onlyOneChild: any; // 临时变量,唯一子路由

/**
 * 判断当前路由是否只有一个子路由
 *
 * 1:如果只有一个子路由: 返回 true
 * 2:如果无子路由 :返回 true
 *
 * @param children 子路由数组
 * @param parent 当前路由
 */
function hasOneShowingChild(
  children: RouteRecordRaw[] = [],
  parent: RouteRecordRaw
) {
  // 子路由集合
  const showingChildren = children.filter((route: RouteRecordRaw) => {
    if (route.meta?.hidden) {
      // 过滤不显示的子路由
      return false;
    } else {
      route.meta!.hidden = false;
      // 临时变量(多个子路由 onlyOneChild 变量是用不上的)
      onlyOneChild = route;
      return true;
    }
  });

  // 如果只有一个子路由, 返回 true
  if (showingChildren.length === 1) {
    return true;
  }

  // 如果没有子路由,显示父级路由
  if (showingChildren.length === 0) {
    onlyOneChild = { ...parent, path: "", noShowingChildren: true };
    return true;
  }
  return false;
}

 这是sidebarItem组件中我使用的方法,之前是const onlyOneChild = ref() //响应式
改成let onlyOneChild : any   
问题即刻解决(我是新手,还在学习中...)

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 将Vue3项目部署服务器需要注意一些配置和问题。首先,你需要配置Nginx服务器来处理跨域问题。跨域处理应该放在Nginx中,而不是在前端的vue.config.js中。这是因为前端和后端是分开部署服务器上的,为了让后端可以接收到前端的请求,需要搭建起前端和后端的连接。\[3\] 其次,你需要在vue.config.js中进行一些配置。如果没有vue.config.js文件,你可以在根目录创建一个,并添加以下内容: ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, publicPath: process.env.NODE_ENV === 'production' ? './' : '/', }) ``` 这些配置可以帮助你解决路由失效的问题。\[2\] 最后,需要注意的是,向服务器发送请求并不能改变代码层面的配置。所以,不要误以为配置了服务器的history,就能在页面中使用history。这是一个常见的误区。\[1\] 希望以上信息对你有帮助! #### 引用[.reference_title] - *1* *2* [vue3项目打包到上线到云服务器遇到的种种问题](https://blog.csdn.net/u012147066/article/details/129103654)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue3 + springboot 简单部署到Windows服务器以及可能遇到的问题](https://blog.csdn.net/challenglistic/article/details/125973296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值