首页 > 网络编程 > 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)
}
- 查看结果

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