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

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