Vue警告：无法挂载组件：未定义模板或渲染函数

Question

我是 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"
  }
}

我在 laravel 框架内的 vuejs 代码之上运行。请提出什么问题？

Answer 1

其他人遇到了完全相同的问题，我写了一个解释，说明这个错误的含义： https://stackoverflow.com/a/46320757/3122639

在您的情况下，您似乎正在使用带有 elixir 的旧版 laravel，现在是 Laravel Mix，无论哪种方式，您都需要确保在 webpack 配置中为 runtime + compiler 构建别名。因此，从 elixir 文档看来，您需要在项目的根目录中创建一个名为 webpack.conf.js 的文件，其中包含以下内容：

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

我建议单独使用webpack 2，而不是使用已弃用的elixir。