vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue控制台报错Failed to mount component: template or render function not defined.

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

作者:喜欢千千呐

这篇文章主要介绍了解决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)
}

总结

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

您可能感兴趣的文章:
阅读全文