[Vue warn]: Failed to mount component: template or render function not defined.

悬赏园豆：30 [已解决问题] 解决于 2018-02-09 11:46

vue文件中引入另一个vue文件就报这个错误了，网上搜到的都是“在 webpack 配置中的 resolve 属性对象中添加如下 alias 设置”，更改了也没有用啊！

module.exports = {
  // ... other options
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  // ... other options
}

我的webpack.config.js是这样的

 resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

我的代码：在index.vue引入indexTop.vue

indexTop.vue

<template>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in banners" @click="jumpUrl($index)">
        <span>{{item.url}}</span>
        <img src="http://api.bfsuma.com/cms.bfsuma.com//ueditor/php/upload/image/20180123/1516676111563583.png" alt="">
      </mt-swipe-item>
    </mt-swipe>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import { Swipe, SwipeItem } from 'mint-ui'

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

  var banners = {}

  export default {
    name: "indexTop",
    data() {
      return {
        banners: banners
      }
    },
    mounted() {
      this.$nextTick(function () {
        var self = this;
        axios.get('http://localhost:66/studio/banner')
          .then(function (res) {
            self.banners = res.data
          })
          .catch(function (err) {
          })
      });
    }
  }


</script>

index.vue

  <div id="index">

    <div class="p_home">

      <my-indexTop></my-indexTop>

      <ul class="p_model_nav" flex="box:mean cross:center">
        <li>
          <a href="community.html">
            <div class="img"><img src="../assets/images/nav_icon1.png" alt=""></div>
            <p>患教社区</p>
          </a>
        </li>
        <li>
          <a href="">
            <div class="img"><img src="../assets/images/nav_icon2.png" alt=""></div>
            <p>患教活动申请</p>
          </a>
        </li>
        <li>
          <a href="">
            <div class="img"><img src="../assets/images/nav_icon3.png" alt=""></div>
            <p>发布动态</p>
          </a>
        </li>
        <li>
          <a href="">
            <div class="img"><img src="../assets/images/nav_icon4.png" alt=""></div>
            <p>我的二维码</p>
          </a>
        </li>
      </ul>
    </div>

    <footer class="p_footer p_border_t">
    <ul class="p_footer_nav" flex="box:mean cross:center">
      <li>
        <a href="">
          <div class="p_f_icon3"></div>
          <p>首页</p>
        </a>
      </li>
      <li>
        <a>
          <div class="p_f_icon2"></div>
          <p>患者</p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="p_f_icon3"></div>
          <p>我的</p>
        </a>
      </li>
    </ul>
  </footer>
  </div>


<script>
  import Vue from 'vue'
  import indexTop from './indexTop.vue'

  export default {
    name: "index",
    components: {
      'my-indexTop': indexTop
    }
  }
</script>

<style>
  body{background: #f1f1f1}
</style>

进入的index.html和main.js是用vue-cli自动生成的

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="src/assets/">
    <meta charset="utf-8">
    <title>fuqing_studio</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <style>
      @import "../base_css/mint-ui.css";
      @import "../assets/css/base.css";
      @import "../assets/css/patient_education.css";
      @import "../assets/css/swiper.min.css";
      @import "../assets/css/mine.css";
    </style>
  </body>
</html>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from './component/index.vue'

new Vue({
  render: h => h(Index),
}).$mount('#app')

花生喂龙 | 初学一级 | 园豆：10
提问于：2018-02-01 09:57

< >

最佳答案

 import Vue from 'vue'
 import indexTop from './indexTop.vue'

  export default {
    name: "index",
    components: {
      'my-indexTop': indexTop
    }
  }

这一块有问题；
indexTop.vue 是在components文件夹下吗？？如果在的话，改成下面这样的：

 import Vue from 'vue'
 import indexTop from '@/components/indexTop.vue'

  export default {
    components: {
      indexTop
    }
  }

收获园豆：30

悟行 | 专家六级 |园豆：12559 | 2018-02-01 10:26

这样直接找不到了，Uncaught Error: Cannot find module "@/components/indexTop.vue"

我把我目录结构发一下吧，

花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:32

@花生喂龙: components 你的目录没有s;改成component

悟行 | 园豆：12559 (专家六级) | 2018-02-01 10:33

@抽象ID: 改了还是报错的，Uncaught Error: Cannot find module "@/component/indexTop.vue"

<script>
  import Vue from 'vue'
  import indexTop from '@/component/indexTop.vue'

  export default {
    name: "index",
    components: {
      indexTop
    }
  }
</script>

花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:34

@抽象ID: 路径是没错的，用@的话webstorm都提示找不到文件

花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:35

@花生喂龙: 我的问题，

import indexTop from '@/component/indexTop.vue'

改成import indexTop from '@/component/indexTop'

悟行 | 园豆：12559 (专家六级) | 2018-02-01 10:37

@花生喂龙:

这个是我做的项目：

悟行 | 园豆：12559 (专家六级) | 2018-02-01 10:38

@花生喂龙: 不用管webstorm,我的也是找不到，这个IDE是国外的，vue框架是国内的，支持不算特别好

悟行 | 园豆：12559 (专家六级) | 2018-02-01 10:39

@抽象ID: Uncaught Error: Cannot find module "@/component/indexTop"，还是不行。。。我在想是不是因为我用webpack-simple建项目的原因，我打算用webpack再弄一个，谢谢你了

花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:42

@花生喂龙:

安装 Node.js、 vue、 vue-cli 。

创建项目：

vue init webpack projectName

我们项目是这么弄的

悟行 | 园豆：12559 (专家六级) | 2018-02-01 10:46

其他回答(3)

你这也太厉害了，前两天还在问要不要用Vue，现在居然就用起来了，完全没有学习适应阶段。

我是服了你们了。

爱编程的大叔 | 园豆：30844 (高人七级) | 2018-02-01 10:05

之前其实就看过文档了，但一直没实践，刚好这次的项目新增的需求还在整理，就想先结合项目试试VueT_T

支持(0) 反对(0) 花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:08

你知道这个问题怎么处理么，我在main.js中只引入indexTop.vue是OK的，但是我想在main.js中引入index.vue,在index.vue中再引入indexTop.vue等组件页面就有问题

支持(0) 反对(0) 花生喂龙 | 园豆：10 (初学一级) | 2018-02-01 10:11

发一下你的 vue-loader 版本号

by.Genesis | 园豆：2824 (老鸟四级) | 2018-02-01 11:26

index.vue中的html标记放入template标记中试试

log琥珀① | 园豆：58 (初学一级) | 2018-02-02 17:17

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

[Vue warn]: Failed to mount component: template or render function not defined.

欢迎，请先登录或者注册。