[Vue warn]: Failed to mount component: template or render function not defined.

最近公司使用Ele-admin这套vue+Element的框架进行开发系统，我这边在创建了页面，编写了页面功能之后，重新运行之后发现报错了，刚好假期有时间在家里磨了一下，找到了原因。

报错信息如下

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <SystemRole>
       <EleEmptyLayout> at node_modules/ele-admin/packages/ele-empty-layout/src/main.vue... (1 recursive calls)
         <EleProLayout> at node_modules/ele-admin/packages/ele-pro-layout/src/main.vue
           <EleLayout> at src/layout/index.vue
             <App> at src/App.vue
               <Root>

出现问题的原因是路由配置的时候，component 填写的页面路径，少了一级，/common/authority/user ，实际页面的位置在 /common/authority/user/index.vue 所以报错。

不过有一个疑问，就是我先启动了项目，然后会根据接口拿到路由地址进行自动配置路由。然后在添加页面，这个时候是可以正常访问，但是只要停止服务在启动就不行了。

找问题的步骤 1、刚开始出现错误，以为是页面什么地方代码不小心改错了，然后vue，js，less的代码都看了一遍，发现没问题，然后就陷入了懵逼状态。 2、然后重新整理了一下思绪，通过写死路由配置的方式，发现可以访问。这个时候就确定了问题是在路由配置的地方了。 3、最后是核对了一下框架demo页面的路由地址跟代码目录，在核对了一下我新加的页面目录。最后就发现了问题。