VueJS-Router repeating URL in hash mode and On refresh gives blank page in history mode

We are migrating our AngularJS app to VueJS. We did step by step migration by adding Webpack into AngularJS and it's working fine. Webpack is successfully creating a compatible bundle.js file for Vue components and loading it in the browser too.

We use Vue-Router for routing our new Vue components and it is also working fine using .

But issue comes when we are refreshing page, and it is happening for both of the vuew-routing technique (Hash and History)

Hash Technique Issue:

When we refresh the page it is appending URL again and again. So we did some research and came to know that histry mode will overcome this limitation.

History Technique Issue:

So, When we refresh the page in history mode it gives blank page (404) even if route exist, But with same route is working.

Below are the files for vue-routing:

main.js

import Vue from 'vue'
import App from 'App.vue'
import router from 'index.js'
const path = require('path')

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from 'home.vue'
Vue.use(Router)

export default new Router({
  mode:'history', // or hash
  base:'#!',
  routes: [
    {
      path: '/home-vue',
      name: 'home-vue',
      component: home
    }
  ]
})

App.vue

<template>
    <div id="app">
        <h1>Hello In APP!!Yuhuuuu</h1>
        <router-link to="/home-vue">Home</router-link>
        <router-view/>
    </div>
</template>

<script>
export default {
  name: 'App'
  
}
</script>

Home.vue

<template>
  <div>
    <h1>Home {{msg}}</h1>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Webpack.config.js

var path = require('path');
const { VueLoaderPlugin } = require('vue-loader')

function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }

module.exports = {
    entry: {
    //   preload: ['./src/app/impact/authentication/login/App.vue', './src/es6/impact/router/index.js']
        app: ['./src/app/main.js']
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
            },
          }
        ]
      },
      plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
      ],
    output: {
        path: path.join(__dirname,'src', 'dist'),
        filename: '[name]-vue.js',
        publicPath: '#!'
    }
};

Webpack.js

var webpack = require('webpack');
var webpackConfig = require('../webpack.config');
var gulp = require('gulp');
// var gutil= require('gulp-util');

gulp.task('webpack', ['transpile'], function(callback) {
    var myConfig = webpackConfig;
    console.log(myConfig)
    // run webpack
    webpack(myConfig, function(err, stats) {
      if (err) throw new gutil.PluginError('webpack', err);
      console.log('[webpack]', stats.toString({
        colors: true,
        progress: true
      }));
      callback();
    });
  });

Note:

1. We are migrating angularjs app so we have also angularjs routing enabled for some of the pages. But I don't think so it creates any problem as router-link is also working in vue.
2. Angular is also appending "#!" in route, But we can overcome by passing base parameter in vuejs route configuratiopn.

So let us know where we are going wrong here. And which technique(Hash Or History) is suitable for this migration.

Waiting for any reply :)

Thank you. Ronak Pandya