Vue Router - Failed to resolve async component after reloading page

Question

I am using lazy load method to create an backend SPA.

Everything is working smoothing when I navigate the link. Whenever I go to the certain page and reload the it, then Vue will prompt me some error messages.

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

This is how my script looks like

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')

I recorded an GIF for better explanation. http://imgur.com/a/IFcA1

Answer 1

What's your webpack configuration?

You probably need to set a public path in your output object:

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