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

Question

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

当我浏览 link 时，一切正常。每当我转到某些页面并重新加载它时，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 配置是什么？

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

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

Answer 2

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

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

至

const Register = (resolve) => require(['../components/Register.vue'], m => resolve(m.default))

Answer 3

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

yarn run dev
# OR
yarn run watch

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

Vue Router - Failed to resolve async component after reloading page

vue.js

vue-router