javascript - 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 'hash' 模式有效，但我想使用 'history' 模式来获得更清晰的 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 'hash' mode works, but I would like to use 'history' mode for cleaner URLs

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

这意味着如果 JavaScript 失败 for any reason ，然后服务器可以改为传送页面。这意味着，如果有人深层链接到您网站上的某个页面，则服务器可以只提供该页面(而不是提供主页，然后使用 JavaScript 将其转变为所需页面)。

您需要编写用于传送页面的服务器端代码。