Vue使用动态路由加载菜单，部署上线后项目无报错，但页面空白（已解决！）

最新推荐文章于 2024-09-27 15:33:05 发布

极光可可

最新推荐文章于 2024-09-27 15:33:05 发布

阅读量2.3k

点赞数 4

分类专栏：解惑杂谈文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_42677727/article/details/126856303

版权

解惑杂谈专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文探讨了在Vue项目中，部署上线后动态路由失效的问题，重点在于区分开发和生产环境的路由加载方式，并强调检查permission.js文件和路径配置。解决方法包括确保生产环境正确引入动态路由和检查路径相对路径是否正确。

摘要由CSDN通过智能技术生成

我们在使用Vue部署项目用了动态路由的项目时，本地运行代码与后端联调一切运行正常，但是在打包之后部署上线了，只有静态路由能够访问的到，这时我们要考虑一下，是不是动态路由没有加载或者相对路径有问题

路径src\store\modules\permission.js下有permission.js文件，该操作为最重要的一步，主要是从后端查询菜单并生成路由。没有这一个文件，动态路由没有办法加载，自然就是访问不到页面，最重要的还是没有报错，就很难受555555。。。。。

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
  // 路由懒加载
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}