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

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配置是什么？

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

输出：{
  路径：“ / dist”，
  文件名：“ [name] .js”，
  chunkFilename：'js / [id]。[chunkhash] .js'，
  publicPath：'/'，
}，