解决Vue控制台报错Failed to mount component: template or render function not defined.

 更新时间:2024年06月05日 11:15:33   作者:喜欢千千呐  
这篇文章主要介绍了解决Vue控制台报错Failed to mount component: template or render function not defined.问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue控制台报错Failed to mount component: template or render function not defined.

今天vue一直报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

一直以为是引用问题,找了很多解决方案都没有,到最后解决了记录一下

我的这个问题的根源在于 vue的文件命名和js的文件命名一致,然后又在同一个文件夹下面,比如下面

Area.vue 和 Area.js在同一个文件夹下面,且同名。

我的解决方案一

是将vue重命名为index.vue

解决方案二

再建一个文件夹专门放js文件,不和vue放在一个文件夹下面。

更改了文件命名后,能正常运行了.

Vue控制台报错信息收集并上报

自己理解为什么,直接上代码

import axios from 'axios';

export default class JsReport {

    private getToken;
    private prefix: string;

    constructor(prefix, getToken) {
        console.log('js reporter init success');
        this.getToken = getToken;
        this.prefix = prefix;
    }

    /*
    * 合并对象,将配置的参数也一并上报
    */
    _cloneObj(oldObj) {
        if (typeof(oldObj) != 'object') return oldObj;
        if (oldObj == null) return oldObj;
        var newObj = new Object();
        for (var prop in oldObj)
            newObj[prop] = oldObj[prop];
        return newObj;
    }

    /**
     * 扩展对象
     */
    _extendObj() {
        var args = arguments;
        if (args.length < 2) {return;}
        var temp = this._cloneObj(args[0]); //调用复制对象方法
        for (var n = 1,len=args.length; n <len; n++){
            for (var index in args[n]) {
                temp[index] = args[n][index];
            }
        }
        return temp;
    }

    send(msg: string | Event, url: string, line: number, col: number, error: any) {

        let defaults = {
            errMsg: msg,
            location: url,
            lineNumber: line,
            columnNumber: col,
            errDetail: error,
        }


        if (error && error.stack) {
            defaults.errDetail = error.stack.toString();
        } else if (arguments.callee) {
            let ext = [];
            let fn = arguments.callee.caller;
            let floor = 3;

            while (fn && (--floor > 0)) {
                ext.push(fn.toString());
                if (fn == fn.caller) {
                    break;
                }
                fn = fn.caller;
            }
            defaults.errDetail = ext.join(",");
        }

        let headers = {
            'Content-Type': 'application/json',
            'Authorization': this.getToken
        }

        axios.put(
            this.prefix + '/log/front/err/log', 
            defaults, 
            { headers }
        ).then(res => {
            if (res.status == 200 && res.data.code == 0) {
                console.log('错误上报成功');
            } 
        }).catch(err => {
        })

    }

};
  • 注册
// apiConfig.baseUrl 为不同环境下的前缀,如果没有,空即可
var jsReport = new JsReport(apiConfig.baseUrl, UserProfile.findLoginToken());
// window 的异常步获被 vue 拦截处理掉了
Vue.config.errorHandler = function( err, vm, info) {
    console.log('vue 步获异常 err: ', err);
    jsReport.send(err.message, window.location.href, 0, 0, err)
}
  • 查看结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中swiper vue-awesome-swiper的使用方法及各种坑解决

    vue中swiper vue-awesome-swiper的使用方法及各种坑解决

    这篇文章主要介绍了vue中swiper vue-awesome-swiper的使用方法及各种坑解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 基于Vue3 + TS + Ant Design Vue 实现精细化菜单按钮权限授权组件功能

    基于Vue3 + TS + Ant Design Vue 实现精细化菜单按钮权限授权组件功能

    本文将分享如何使用Vue3 + TypeScript + Vite + Ant Design Vue实现一个功能完善的菜单与按钮级别的权限授权组件,支持树形菜单选择、动态按钮联动、状态持久化等高级特性,感兴趣的朋友一起看看吧
    2026-03-03
  • Vue实现数据筛选与搜索功能的示例代码

    Vue实现数据筛选与搜索功能的示例代码

    在许多Web应用程序中,数据筛选和搜索是关键的用户体验功能,本文将深入探讨在Vue中如何进行数据筛选与搜索的实现,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • Vue页面监听键盘按键的方法总结

    Vue页面监听键盘按键的方法总结

    在Vue页面中,可以使用多种方法来监听键盘按键,这篇文章主要为大家整理了五种常用的方法,文中的示例代码讲解详细,需要的小伙伴可以参考下
    2023-10-10
  • Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    这篇文章给大家介绍了Vue+Element UI el-tree树只能选择子节点并且支持检索的文章,通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • Vue.js 中的实用工具方法【推荐】

    Vue.js 中的实用工具方法【推荐】

    这篇文章主要介绍了Vue.js 中的实用工具方法,本文是小编日常开发中常用的一些工具方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • VUE项目中引入vue-router的详细过程

    VUE项目中引入vue-router的详细过程

    vue-router 也叫 vue 路由,根据不同的路径,来执行不同的组件,这篇文章主要介绍了VUE项目中引入vue-router,需要的朋友可以参考下
    2023-05-05
  • vue实现路由不变的情况下,刷新页面操作示例

    vue实现路由不变的情况下,刷新页面操作示例

    这篇文章主要介绍了vue实现路由不变的情况下,刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
    2020-02-02
  • 通过实例解析vuejs如何实现调试代码

    通过实例解析vuejs如何实现调试代码

    这篇文章主要介绍了通过实例解析vuejs如何实现调试代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue3渲染函数(h函数)的变更剖析

    vue3渲染函数(h函数)的变更剖析

    这篇文章主要介绍了vue3渲染函数(h函数)的变化,文中给大家介绍了h函数的三个参数详细说明及vue3 h函数-绑定事件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10

最新评论