以上是我打包后访问界面空白,控制台也无错误提示。我排查了很久,最后问题是在定义路由时,组件导入方式的问题,这里纯属不小心写错了,也算是长教训了。
我在定义组件对应的component时
component: import('@/views/admin/marketing/content/content.vue'),
在开发环境下Vite会先把所有模块打包可能还能正常跑,但打包产物里 Vue Router 期望拿到的是“组件本身或函数”,结果拿到的是一个 Promise,加载失败就会渲染空白。
component: () => import('@/views/admin/marketing/content/content.vue'),
替换成以上即可,路由懒加载。
替换以后可以使用npm run preview,该命令是 Vite 项目内置的预览命令。Vite 会开启一个本地静态服务器,读取 dist 内容进行“部署后”的模拟。