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

Question

在尝试使用 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: '/',
  },
})

谢谢你。

标签： javascriptvue.jsvue-router

Answer 1

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

我把代码改成了这个。

list.vue

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