Require not working in vue.js

Question

I'm new to vue trying to build a simple SPA with Vue without vue-router . Following the vue-2.0-simple-routing-example I'm just trying to serve pages via require(dynamicPathToFile+'.vue') . But it's not working.

This works:

Main.Vue

<template>
    <div>
        <p>Hello World</p>
    </div>
</template>

Main.JS

import Vue from 'vue'
import App from './main.vue'

const app = new Vue({
  el: '#app',
  render (h) {
    return h(App)
  }
})

but why doesn't this work?

Main.JS

import Vue from 'vue'

const app = new Vue({
  el: '#app',
  render (h) {
    return h(require('./main.vue'))
  }
})

It compiles just fine, but in my javascript console I get

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

found in

---> <Anonymous>
       <Root>

Nothing displays

how do i get it to work so I can dynamically require a page, rather than import it at the top?

Answer 1

需要包含.default，因为我正在使用Babel的更新（固定）版本