Vue-Router - Async-Komponente konnte nach dem erneuten Laden der Seite nicht aufgelöst werden

Question

Ich verwende Lazy-Load-Methode, um ein Backend-SPA zu erstellen.

Alles funktioniert reibungslos, wenn ich den Link navigiere. Immer, wenn ich gehe auf die bestimmte Seite und neu laden es, dann Vue wird mir einige Fehlermeldungen.

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 

Dies ist, wie mein Skript wie

sieht

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

ich eine GIF für eine bessere Erklärung aufgenommen. http://imgur.com/a/IFcA1

Answer 1

Was ist Ihre Webpack-Konfiguration?

Sie müssen wahrscheinlich einen öffentlichen Weg in Ihrem Ausgangsobjekt setzen:

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