webpack中使用require 引入文件报错？

Question

在github中查看完整项目

import  Vue from 'vue'
import  VueRouter from 'vue-router'
Vue.use(VueRouter)

import index from '../views/index.vue'
import rage from '../views/rage.vue'
import songList from '../views/songList.vue'

const router=new VueRouter({
    routes:[{
        path:'/index',
        component:index,
        children:[
            {
                path:'rage',
                component:rage
            },
            {
                path:'songList',
                component:songList
                // component:require('../views/songList')  //修改成require引入就报错？
            }
        ]
    },{
        path:"*",redirect:'/index/rage'
    }]
})

export default router

说明：
使用：require('../views/songList.vue') 页面可以显示出来，但是引入的路由页面无法显示，报错如下图

Answer 1

这样写吧应该

Answer 2

改成component:require('../views/songList.vue')这样呢

Answer 3

加上.vue试试

Answer 4

碰到和楼主一模一样的问题（尴尬）.. 我也是看的网易云这个项目准备练练手。然后就莫名其妙的这样不行，最后resolve这样就可以了 可是不知道为什么人家的就可以。。

Answer 5

require过来的vue文件是一个模块，不是一个数据，所以要先解析它，再使用，你console一下就知道了

Answer 6

目前也遇到同样的问题，想问下博主是怎么解决的？