鍍金池/ 問答/HTML/ vue出現(xiàn)以下兩個(gè)問題

vue出現(xiàn)以下兩個(gè)問題

Cannot find element: #app 和 Failed to mount component: template or render function not defined. 兩個(gè)錯(cuò)誤

其中 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/>'

})

為啥報(bào)錯(cuò)啊

回答
編輯回答
失魂人

你試試import App from './App'改成import App from './App.vue'
不行的話，提供一下你的目錄結(jié)構(gòu)截圖

2017年11月29日 04:01
編輯回答
小眼睛

第一個(gè)錯(cuò)誤指向的是index.html里的id為app的dom結(jié)構(gòu)，el: '#app',找的就是它。

第二個(gè)錯(cuò)誤，render function這個(gè)是你vue的問題，注意下你的vue-cli的版本，早期的vue-cli版本無(wú)法自動(dòng)引入正確的vue.js，你需要自己手動(dòng)在webpack里面配置vue的路徑，類似：

// 默認(rèn)是在配置entry的那個(gè)文件
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
2018年1月22日 23:09