Vue.js VueJS路由器在哈希模式下重复URL，在刷新时在历史模式下提供空白页

我们正在将AngularJS应用程序迁移到VueJS。我们通过在AngularJS中添加Webpack一步一步地进行迁移，效果很好。Webpack正在成功为Vue组件创建兼容的bundle.js文件，并将其加载到浏览器中

我们使用Vue路由器来路由我们的新Vue组件，并且使用它也可以正常工作

但当我们刷新页面时，问题就出现了，vuew路由技术（哈希和历史）都出现了这种情况

哈希技术问题：

当我们刷新页面时，它会一次又一次地添加URL。因此，我们做了一些研究，并了解到历史模式将克服这一限制

历史技术问题：

所以，当我们在历史模式下刷新页面时，即使存在路由，但使用相同的路由工作，它也会给出空白页面（404）

以下是用于vue路由的文件：

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

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>

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();
    });
  });

注意：

我们正在迁移angularjs应用程序，因此我们还为一些页面启用了angularjs路由。但我认为这不会产生任何问题，因为路由器链接也在vue中工作

Angular还在route中附加了“#！”，但我们可以通过在vuejs route ConfigurationOpn中传递base参数来克服

所以，让我们知道我们在这里哪里出了问题。 以及哪种技术（哈希或历史）适用于此迁移

等待任何答复：）

多谢各位。 罗纳克潘迪亚

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

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: '#!'
    }
};

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();
    });
  });