问题描述
增加路由懒加载,开发环境运行正常,部署到服务器页面显示白屏
问题出现的环境背景及自己尝试过哪些方法
vue+typescript搭建项目,增加路由懒加载,部署到服务器后,控制台无任何报错信息。
1.初期怀疑路径问题,通过查阅相关开发者的文档,config下index.js中assetsPublicPath更改为./,无法解决
2.由于无报错信息,后通过最简demo,逐步验证白屏原因,验证过程如下:
一、最简demo
const Home= () => import('@/components/Home.vue')
此时部署后,页面正常显示
二、增加ts装饰器,路由引用不变
此时部署后,页面白屏
三、去除二中的装饰器
此时部署后,页面正常显示
以下为初步定为总结的验证情况:
相关代码
- vue+ts项目demo
- 验证只需要:
1.将demo中src/router中index.ts的路由规则更改为路由懒加载
2.将config/index.js更改打包后的index.html的引用资源文件路径,build下的assetsPublicPath,由/改为./
3.然后打包部署到服务器,观察是否白屏
你期待的结果是什么?实际看到的错误信息又是什么?
期待结果,增加路由懒加载,打包部署后,页面正常显示;实际上部署后无任何报错信息;
不知道如何定位问题,请各位大佬指点迷津┭┮﹏┭┮
学艺不精,用的模板出了问题解决不了。目前vue-cli3已经支持typescript,并且有官方人员维护。以上问题花了很多精力,最终通过项目移植到最新的cli3,从而得以解决。