Question

我正在使用vuetify / vue-router设置基本的vue应用程序，并且在加载基本URL＆＃39; /＆＃39;时，一切正常。我可以毫无问题地点击一个/管理/产品。

但是，当通过在地址栏中输入来直接加载/管理/产品时，我收到此错误：

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＆＃39; hash＆＃39;模式有效，但我想使用＆＃39; history＆＃39;更清洁网址的模式。

供参考：我已使用此模板

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＆＃39; hash＆＃39;模式有效，但我想使用＆＃39; history＆＃39;更清晰的网址模式

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

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

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

Webpack试图从子目录

1 个答案: