最近有一个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 是正常使用的，但无法部署使用，即便部署成功了，无任何报错的白屏。

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