Webpack尝试从子目录加载build.js

Question

我正在使用vuetify / vue-router设置一个基本的vue应用程序，并且在加载基本URL'/'时，一切正常。 我可以单击一个/ manage / products，没有任何问题。

但是，当通过在地址栏中键入直接加载/ manage / products时，出现此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

似乎要加载/manage/dist/build.js而不是/dist/build.js。

我可以更改webpack.config.js以确保调用了正确的build.js吗？

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},
resolve: {
  extensions: ['.js', '.vue'],
  alias: {
    '@' : path.resolve(__dirname, './src'),
    'vue$': 'vue/dist/vue.esm.js',
    'public': path.resolve(__dirname, './public')
  }
}

vue-router的“哈希”模式可以工作，但是我想对更清洁的URL使用“历史记录”模式。

供参考：我使用了此模板

vue init vuetifyjs/webpack-simple

编辑：

我找到了解决方案。 vuetifyjs / webpack-simple模板从一开始就配置错误。 在index.html内部，我进行了更改：

<script src="./dist/build.js"></script>

至

<script src="/dist/build.js"></script>

并确保在webpack.config.js中存在以下选项：

devServer: {
    historyApiFallback: true
},

Answer 1

vue-router的“哈希”模式有效，但是我想对更清洁的URL使用“历史记录”模式

History API的重点是允许您将DOM生成的页面和服务器生成的页面相互映射。

这意味着如果JavaScript 由于任何原因而失败，则服务器可以代替该页面。 这意味着，如果有人深入链接到您网站上的页面，则服务器仅可以交付该页面（而不是交付主页，然后使用JavaScript将其变异为所需的页面）。

您需要编写将提供页面的服务器端代码。