vue3.0 路由懒加载竟然白屏,竟然是少了这个函数

3,578 阅读1分钟

大家好啊,最近vue3.0的热潮汹涌澎湃,我也不能拉下,积极的学习vue3.0的新特性。

vue3.0不得不说,真的是快,好,setup的语法糖确实好用,在我高兴之际,我打包试试看看效果,没想到问题竟然出来了,百思不得其解

image.png

那,这是楼主写的懒加载路由,就一个。

npm run dev 是正常的显示

image.png

就是个简单的例子,如上。

因为打包用的是 hash 模式 vue2.0打包后是双击打包后的index.html是可以正常访问的。

但是 vite打包发现静态资源找不到,就如下面:

image.png

我是一个劲的百度啊,终于发现是vue3.0跟vue2.0不一样 需要在vite.config.vue中配置一下

image.png

这个配置可以看 vite官网有解释,我也贴上吧,免得找了

image.png

都弄好了,重新打包看看,

这是啥情况,打包后的静态资源都有了 但是 白屏!! 白屏!!!

image.png

这个样子

image.png

我是各种百度啊,头快秃了,我去vue3.0大佬们下求救,终于在

Vite生产环境踩坑记录,满满的干货,建议收藏! 这位楼主大大的解释下,自己联想找到了问题的解决办法

image.png

引入

image.png

vue3.0新增的 解释如下,我就不赘述了

image.png

最后打包,是完美显示的,终于不秃头了 nice