Question

我使用延迟加载方法来创建后端SPA。

当我浏览链接时，一切都在顺利进行。每当我转到某个页面并重新加载它时，Vue会提示我一些错误消息。

Uncaught SyntaxError: Unexpected token <

app.js:144 Error: Loading chunk 10 failed.
    at HTMLScriptElement.onScriptComplete (app.js:98)

[vue-router] Failed to resolve async component default: Error: Loading chunk 10 failed.

[vue-router] uncaught error during route navigation:

app.js:15254 Error: Loading chunk 10 failed.
    at HTMLScriptElement.onScriptComplete

这就是我的剧本的样子

const Home = (resolve) => require(['../components/Home.vue'], resolve)
const Category = (resolve) => require(['../components/Category.vue'], resolve)
const CategoryEdit = (resolve) => require(['../components/CategoryEdit.vue'], resolve)
const Register = (resolve) => require(['../components/Register.vue'], resolve)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', component: Home },
        { path: '/home', component: Home },
        { path: '/category', component: Category },
        { path: '/category/edit/:id', component: CategoryEdit },
        { path: '/company/register', component: Register }
    ]
});

const nav = new Vue({ 
    router,
    components : {
        Home,
        Category,
        CategoryEdit,
        Register
    },
    ...
}).$mount('#app')

为了更好的解释，我录制了一个GIF。 http://imgur.com/a/IFcA1

Answer 1

你的webpack配置是什么？

您可能需要在输出对象中设置公共路径：

output: {
  path:'/dist',
  filename: '[name].js',
  chunkFilename:'js/[id].[chunkhash].js',
  publicPath: '/',
},

Answer 2

我已经解决了这个问题！你应该改变

foo2

到

self.a = bar2()

Answer 3

我遇到了同样的问题，解决的问题只是重建yarn或npm（希望这对其他人有所帮助）：

yarn run dev
# OR
yarn run watch

Vue Router - 重新加载页面后无法解析异步组件

3 个答案: