发布于 4年前

解决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');

©2020 edoou.com   京ICP备16001874号-3