vue出现以下两个问题

Question

Cannot find element: #app 和 Failed to mount component: template or render function not defined. 两个错误

其中 app.vue
<template>

<div id="app">
    <router-view/>
</div>

</template>

<script>

export default {
    name: 'App'
}

</script>

<style lang="less">

@import '~vux/src/styles/reset.less';

</style>

main.js
import Vue from 'vue'
import App from './App'
import FastClick from 'fastclick'

import router from './router'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies);

FastClick.attach(document.body)

Vue.config.productionTip = false

/ eslint-disable no-new /
new Vue({

el: '#app',
router,
components: { App },
template: '<App/>'

})

为啥报错啊

Answer 1

第一个错误指向的是index.html里的id为app的dom结构，el: '#app',找的就是它。

第二个错误，render function这个是你vue的问题，注意下你的vue-cli的版本，早期的vue-cli版本无法自动引入正确的vue.js，你需要自己手动在webpack里面配置vue的路径，类似：

// 默认是在配置entry的那个文件
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

Answer 2

你试试import App from './App'改成import App from './App.vue'
不行的话，提供一下你的目录结构截图