当前位置: 代码网 > it编程>前端脚本>Vue.js > 解决Vue控制台报错Failed to mount component: template or render function not defined.

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

2024年06月10日 Vue.js 我要评论
vue控制台报错failed to mount component: template or render function not defined.今天vue一直报错vue.runtime.esm.

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)
}
  • 查看结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com