vue-router：无法解析异步组件默认值：SyntaxError: Unexpected token <答案

【问题标题】：vue-router : Failed to resolve async component default: SyntaxError: Unexpected token <vue-router：无法解析异步组件默认值：SyntaxError: Unexpected token <
【发布时间】：2019-08-17 11:15:05
【问题描述】：

我在尝试使用 Vue 路由器导入 Vue 组件时不断收到此错误。

这是我的main_app.js：

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Home</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  {
    path: '/home',
    component: () => import('./list.vue')
  }
]
const router = new VueRouter({
  routes, 
  // mode: 'history'
})

const app = new Vue({
  router
}).$mount('#app')

这是我的list.vue：

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

尝试进行此更改，但它不起作用，我恢复了。

const router = new VueRouter({
  routes, // short for `routes: routes`
  // mode: 'history'
  output: {
    path: '/js',
    filename: '[name].js',
    chunkFilename: 'js/[id].[chunkhash].js',
    publicPath: '/',
  },
})

谢谢。

【问题讨论】：

你还能使用动态导入吗？因为如果你使用的是babel，语法解析需要这个插件link
我没有使用 babel。

标签： javascript vue.js vue-router

【解决方案1】：

现在，我尝试了这个，它奏效了。不确定这是否是完美的解决方案。

我把代码改成了这个。

list.vue

export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    },
    template: '<template>    <div id="right"></div> </template>',
}

【讨论】：