快捷導(dǎo)航

解決Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: template or render function not defined.

更新時(shí)間：2024年06月05日 11:15:33 作者：喜歡千千吶

這篇文章主要介紹了解決Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: template or render function not defined.問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: template or render function not defined.

今天vue一直報(bào)錯(cuò)

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

一直以為是引用問(wèn)題，找了很多解決方案都沒(méi)有，到最后解決了記錄一下

我的這個(gè)問(wèn)題的根源在于 vue的文件命名和js的文件命名一致，然后又在同一個(gè)文件夾下面，比如下面

Area.vue 和 Area.js在同一個(gè)文件夾下面，且同名。

我的解決方案一

是將vue重命名為index.vue

解決方案二

再建一個(gè)文件夾專門(mén)放js文件，不和vue放在一個(gè)文件夾下面。

更改了文件命名后，能正常運(yùn)行了.

Vue控制臺(tái)報(bào)錯(cuò)信息收集并上報(bào)

自己理解為什么，直接上代碼

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;
    }

    /*
    * 合并對(duì)象，將配置的參數(shù)也一并上報(bào)
    */
    _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;
    }

    /**
     * 擴(kuò)展對(duì)象
     */
    _extendObj() {
        var args = arguments;
        if (args.length < 2) {return;}
        var temp = this._cloneObj(args[0]); //調(diào)用復(fù)制對(duì)象方法
        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('錯(cuò)誤上報(bào)成功');
            } 
        }).catch(err => {
        })

    }

};

注冊(cè)

// apiConfig.baseUrl 為不同環(huán)境下的前綴，如果沒(méi)有，空即可
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)
}