首页 > 网络编程 > 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) }
- 查看结果
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。