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

Question

我正在使用 vuetify/vue-router 设置一个基本的 vue 应用程序，并且在加载基础 url '/' 时，一切正常。我可以点击 a 到 /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

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

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

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

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

Webpack trying to load build.js from subdirectory

javascript

webpack

vue.js

vue-router

vuetify.js