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

【问题标题】：Webpack trying to load build.js from subdirectoryWebpack 尝试从子目录加载 build.js
【发布时间】：2018-05-02 10:30:32
【问题描述】：

我正在使用 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
},

【问题讨论】：

标签： javascript webpack vue.js vue-router vuetify.js

【解决方案1】：

vue-router 'hash' 模式有效，但我想使用 'history' 模式来获得更简洁的 URL

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

这意味着如果 JavaScript 失败 for any reason，那么服务器可以转而交付页面。这意味着，如果有人深度链接到您网站上的某个页面，那么服务器可以只交付该页面（而不是交付主页，然后使用 JavaScript 将其变异为所需的页面）。

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

【讨论】：