脚本宝典收集整理的这篇文章主要介绍了解决vue报错Failed to mount component，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

[Vue warn]: Failed to mount component: template or render function not defined.
今天上班运行vue项目，当我进入昨天写的一个页面时，突然蹦出了上面这个错误，顿时我不知所挫了，昨天还好好的，为什么今天就报错了呢？

---

报错页面目录结构：

senior-certification(文件夹)     errorMsg.js(表单验证提示文字)     index.js(页面js，由于不想让index.vue文件代码数量过多，因此将script内容单独拿出来放到单独的js中)     index.vue(页面)     senior-certification.scoPEd.styl(样式)     validations.js(表单验证器规则)

页面结构

<template>     <div class="senior-certification-com">...</div> </template>  <script>     import index From './index.js';     export default index; </script>  <style lang="stylus" scoped>     @import "senior-certification.scoped.styl" </style> 

router.js

let SeniorCertification = () => import('./views/usercenter/senior-certification');  const router = new Router({     {       path: '/usercenter/senior-certification',       name: 'senior-certification',       component: SeniorCertification,       meta: { requireAuth: true },     }, }); export default router;

---

以上代码看上去没有任何问题对吧，也看不出哪里有问题，毕竟昨天都还好好的。那么问题究竟出在哪呢？经过我反复测试及GOOGLE，发现问题出现在这段代码中：
let SeniorCertification = () => import('./views/usercenter/senior-certification');
然后再看我的目录结构：

senior-certification(文件夹)     errorMsg.js(表单验证提示文字)     index.js(页面js，由于不想让index.vue文件代码数量过多，因此将script内容单独拿出来放到单独的js中)     index.vue(页面)     senior-certification.scoped.styl(样式)     validations.js(表单验证器规则)

我把本应在<script>标签中的代码拿出来放到了index.js上，而我在router.js中引入组件时又偷懒了。因此vue-loader在引入时把index.js当做了入口，而不是index.vue。所以就出现了上面这个问题，解决方案很简单，引入组件时加个index.vue就可以了。
let SeniorCertification = () => import('./views/usercenter/senior-certification/index.vue');

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的解决vue报错Failed to mount component全部内容，希望文章能够帮你解决解决vue报错Failed to mount component所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。