vue3项目,本地页面正常显示,打包后页面空白

通过浏览器的页面元素选择定位到问题是因为路由没有正确加载,但是排查了路由文件,入口文件,vite.config.js文件,都没有发现任何问题,直到将路由文件里面的按需加载页面文件改成直接加载,才正确渲染出了页面,才发现按需加载写错了
错误写法

javascript 复制代码
  {
    path: "/login",
    name: "login",
    hidden: false,
    component: import("@/pages/login/login.vue"),  //import应该放在一个函数里面
  },

正确写法

javascript 复制代码
  {
    path: "/login",
    name: "login",
    hidden: false,
    component: () => import("@/pages/login/login.vue"),
  },
相关推荐
RuoyiOffice10 小时前
SpringBoot+Vue3 单据校验设计:保存草稿、提交审批、退回重填,各该检查什么?
spring boot·vue3·flowable·表单设计·ruoyi office·草稿保存·单据校验
RuoyiOffice2 天前
SpringBoot+Vue3 业财协同架构:预算、费用分摊、发票、往来与凭证怎样避免五套数字
spring boot·vue3·财务管理·spring boot 3·预算管理·ruoyi office·业财协同
RuoyiOffice3 天前
Vue3+TypeScript 企业管理平台统一UI:新增一个模块,为什么还要重新调样式?
spring boot·typescript·vue3·组件化开发·企业管理软件·ruoyi office·统一ui
Liu.7746 天前
Vue3 中如何使用 GET 请求传递复杂参数
vue.js·vue3
RuoyiOffice7 天前
Spring AI+Vue3 企业知识库设计:让每个答案有依据,让每份资料守住权限
java·spring boot·vue3·rag·企业知识库·spring ai·ruoyi office
RuoyiOffice8 天前
SpringBoot3+Vue3 员工全生命周期:入转调离如何衔接账号、权限、资产与交接
spring boot·vue3·权限管理·员工管理·hrm·ruoyi office·人事变更
RuoyiOffice9 天前
SpringBoot3+Vue3 企业 AI 工作流:Tinyflow 画布、LLM 节点与在线试跑怎么落地
spring boot·大模型·vue3·agent·ai工作流·ruoyi office·tinyflow
RuoyiOffice9 天前
Springboot + Vue3 + FormCreate表单引擎,直接用AI对话进行单据设计,告别拖拽画表单
spring boot·低代码·vue3·sse·formcreate·ruoyi office·ai表单
RuoyiOffice12 天前
SpringBoot+Vue3+Onlyoffice 企业文件生命周期:上传、业务关联、权限、版本与安全清理
spring boot·vue3·文件管理·对象存储·权限控制·ruoyi office·附件管理
格数致用15 天前
03- Luckysheet与Vue3+Electron集成实战指南
electron·vue3·luckysheet