当前位置:首页 > 编程技术 > 正文内容

vue3项目编译部署到服务器后页面显示空白的原因

鱼湘肉丝8个月前 (08-21)编程技术459

   最近有一个vue3项目编译后部署到服务器,页面打开是空白,并且F12调试控制台没有任何报错输出,原因是动态懒加载语法的问题导致的,具体看如下分析:

vue路径component

  在vue3中,component属性可以使用 import('') 来动态加载组建,标准语法如下:

const routes = [
    {
        path: '/login',
        name: 'login',
		//标准加载组建方法
        component: () => import('../view/login.vue'),
        meta: {
			title: '登录',
			needAuth: false
		}		
    }
]

 

编译后部署服务器页面空白原因

如果按照以下语法来动态加载组建,将会造成编译后部署到服务器页面空白,并且无任何报错提示:

const routes = [
    {
        path: '/login',
        name: 'login',
		//标准加载组建方法
        //component: () => import('../view/login.vue'),
		//造成空白的写法
		component: import('../view/login.vue'),
        meta: {
			title: '登录',
			needAuth: false
		}		
    }
]

原因

造成这个问题的原因是如果不加 ()=>   在本地  npm run dev 是正常使用的,但无法部署使用,即便部署成功了,无任何报错的白屏。

64d39ef5c378b42306cf88436e5b507.png

本文链接:https://yun.ha.cn/post/147.html 转载需授权!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由云蛤社区发布,如需转载请注明出处。

技术交流QQ群:657091037

部分文章和资源从互联网中收集,如有侵权 联系站长删除。

本文链接:https://yun.ha.cn/post/147.html

分享给朋友:
返回列表

没有更早的文章了...

没有最新的文章了...

“vue3项目编译部署到服务器后页面显示空白的原因” 的相关文章

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。