How to correctly include vue-router via cdn to make history mode working?

Question

I include scripts in html document like this:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

In main.js when I write mode: 'history' nothing appears:

const routes = [
  {path: '/', name: 'blank', component: BlankPage},
  {path: '/directory1', name: 'directory1', component: Directory1},
  {path: '/directory2', name: 'directory2', component: Directory2},
  {path: '/directory3', name: 'directory3', component: Directory3},
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

const app = new Vue({
  router,
}).$mount('#app')

When I remove mode:'history' web page appears. How to handle the situation?

Answer 1

History mode requires some server, for example, a dev-server. So I've created a simple dev-server with the help of gulp. gulpfile.js:

var gulp = require('gulp'),
  connect = require('gulp-connect');
 
gulp.task('webserver', function() {
  connect.server({
    fallback: 'table.html'
  });
});
 
gulp.task('default', gulp.series('webserver'));

And now history mode works. If someone knows why it is that please tell me!