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，无论哪种方式，您都需要确保对runtime + compiler进行别名处理在你的webpack配置中构建。因此，从elixir文档看起来您需要在项目的根目录中创建一个名为webpack.conf.js的文件，其中包含以下内容：

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

我建议您自己使用webpack 2，而不是使用已弃用的elixir。

Vue警告：无法安装组件：未定义模板或渲染功能

1 个答案: