vue+typescript搭建的项目中,增加路由懒加载,开发环境运行正常,部署到服务器页面显示白屏

问题描述

增加路由懒加载,开发环境运行正常,部署到服务器页面显示白屏

问题出现的环境背景及自己尝试过哪些方法

vue+typescript搭建项目,增加路由懒加载,部署到服务器后,控制台无任何报错信息。
1.初期怀疑路径问题,通过查阅相关开发者的文档,config下index.js中assetsPublicPath更改为./,无法解决
2.由于无报错信息,后通过最简demo,逐步验证白屏原因,验证过程如下:
一、最简demo
const Home= () => import('@/components/Home.vue')
clipboard.png
此时部署后,页面正常显示
二、增加ts装饰器,路由引用不变
clipboard.png
此时部署后,页面白屏
三、去除二中的装饰器
clipboard.png
此时部署后,页面正常显示

以下为初步定为总结的验证情况:

clipboard.png

相关代码

1.将demo中src/router中index.ts的路由规则更改为路由懒加载
clipboard.png
2.将config/index.js更改打包后的index.html的引用资源文件路径,build下的assetsPublicPath,由/改为./
clipboard.png
3.然后打包部署到服务器,观察是否白屏

你期待的结果是什么?实际看到的错误信息又是什么?

期待结果,增加路由懒加载,打包部署后,页面正常显示;实际上部署后无任何报错信息;
不知道如何定位问题,请各位大佬指点迷津┭┮﹏┭┮

阅读 3.3k
1 个回答

学艺不精,用的模板出了问题解决不了。目前vue-cli3已经支持typescript,并且有官方人员维护。以上问题花了很多精力,最终通过项目移植到最新的cli3,从而得以解决。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题