javascript - Vue warn: Failed to mount component: template or render function not defined - Stack Overflow

admin管理员组

文章数量:1416332

I am new to vuejs, I am getting following error: Error:

[Vue warn]: Failed to mount ponent: 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',
    ponents: { 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-piler": "^2.4.2",
    "vue2-datatable-ponent": "^1.1.7"
  }
}

I am running above vuejs code inside laravel framework. Please suggest what is wrong ?

I am new to vuejs, I am getting following error: Error:

[Vue warn]: Failed to mount ponent: 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',
    ponents: { 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-piler": "^2.4.2",
    "vue2-datatable-ponent": "^1.1.7"
  }
}

I am running above vuejs code inside laravel framework. Please suggest what is wrong ?

• javascript
• vue.js
• vuejs2
• vue-router

Share Improve this question Follow asked Sep 20, 2017 at 5:21 AvinashAvinash 2,18944 gold badges2929 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Somebody else had exactly the same problem, I wrote an explanation as to what this error means there: https://stackoverflow./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 + piler build in your webpack config. 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:

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.mon.js'
    }
  }
}

I would remend using webpack 2 on it's own, rather than using elixir, which has been deprecated.

本文标签： javascriptVue warn Failed to mount component template or render function not definedStack Overflow