javascript - template - Vue warn: Error al montar el componente: plantilla o función de representación no definida

vue emit example

Question

Soy nuevo en vuejs, recibo el siguiente error: Error:

[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"
  }
}

Estoy corriendo por encima del código laravel dentro de laravel framework. Por favor, sugiera lo que está mal?

Answer 1

Alguien más tenía exactamente el mismo problema, escribí una explicación sobre lo que significa este error allí: https://stackoverflow.com/a/46320757/3122639

En tu caso, parece que estás usando una compilación más antigua de laravel con elixir , que ahora es Laravel Mix , en cualquier caso debes asegurarte de que estás creando alias la compilación del runtime + compiler en runtime + compiler en la configuración de tu paquete web. Por lo tanto, a partir de los documentos elixir parece que tendrá que crear un archivo llamado archivo webpack.conf.js en la raíz de su proyecto con lo siguiente:

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

Yo recomendaría usar webpack 2 por sí mismo, en lugar de usar el elixir , que ha quedado en desuso.