[英]Vue warn: Failed to mount component: template or render function not defined
I am new to vuejs, I am getting following error: Error: 我是vuejs的新手,我收到以下错误:错误:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Vcinfo> at resources/assets/js/valuechain/Vcinfo.vue
<Root>
Vcinfo.vue
<template>
<div id="root">
<div class="navbar navbar-default">
<div class="navbar-brand">
<router-link to="/vc">VALUECHAIN</router-link>
</div>
<ul class="nav navbar-nav navbar-left">
<li><router-link to="/vc/setting_keywords">Keywords Setting</router-link></li>
<li><router-link to="/vc/keyword_search">Search Keywords</router-link></li>
</ul>
</div>
<router-view></router-view>
</div>
</template>
<style lang="css">
.navbar {
margin-top:15px;
}
</style>
vc.js
import Vue from 'vue'
import Vcinfo from './Vcinfo.vue'
import router from './router'
const app = new Vue({
el: '#vc',
components: { Vcinfo },
template: '<vcinfo></vcinfo>',
router
})
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-vue-pagination": "^1.0.6",
"lodash": "^4.16.2",
"moment": "^2.18.1",
"moment-timezone": "^0.4.1",
"vue": "^2.0.1",
"vue-js-toggle-button": "^1.1.2",
"vue-resource": "^1.0.3",
"vuejs-datepicker": "^0.9.6"
},
"dependencies": {
"axios": "^0.16.2",
"vee-validate": "^2.0.0-rc.8",
"vue-bootstrap-datetimepicker": "^3.0.0",
"vue-axios": "^2.0.2",
"vue-router": "^2.7.0",
"vue-template-compiler": "^2.4.2",
"vue2-datatable-component": "^1.1.7"
}
}
I am running above vuejs code inside laravel
framework. 我在laravel
框架内运行vuejs代码。 Please suggest what is wrong ? 请说明有什么问题?
Somebody else had exactly the same problem, I wrote an explanation as to what this error means there: https://stackoverflow.com/a/46320757/3122639 其他人有完全相同的问题,我写了一个关于这个错误意味着什么的解释: https : //stackoverflow.com/a/46320757/3122639
In your case, it looks like you are using an older build of laravel with elixir
, which is now Laravel Mix
, either way you need to make sure you are aliasing the runtime + compiler
build in your webpack config. 在您的情况下,看起来您正在使用旧版本的laravel与elixir
,现在是Laravel Mix
,无论哪种方式,您都需要确保在webpack配置中对runtime + compiler
构建进行别名。 So, from the elixir docs it looks like you will need to create a file called webpack.conf.js
file in the root of your project with the following: 因此,从elixir文档看起来您需要在项目的根目录中创建一个名为webpack.conf.js
文件,其中包含以下内容:
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
I would recommend using webpack 2
on it's own, rather than using elixir
, which has been deprecated. 我建议自己使用webpack 2
,而不是使用已被弃用的elixir
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.