Vue 路由在生产环境中无法正常工作

Question

我是 vuejs 的新手。对于我的 Vuejs 应用程序，在运行 "npm run build" 之后，我无法访问 Web 托管服务器中的 url，如“/foo/apple”。它显示错误 404 我正在使用 HTML5 历史模式，(https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations) 并且我在 dev-server.js:

中实现了如下所示的 "connect-history-api-fallback"

const express = require('express')
const app = express()
app.use(require('connect-history-api-fallback')())

我的router/index.js

export default new Router({
  mode: 'history',
  {
      path: '/Product',
      name: 'Product',
      component: Product,
  },
  {
      path: '/Product/kraftbag',
      name: 'Kraftbag',
      component: Kraftbag
  },
});

我的网站http://americandunnage.n55lwi.info/。我找了很多关于这个问题的帖子，但我还是找到了解决办法。

Answer 1

您可能错过了 hashbang (#)

尝试 #/foo/apple 而不是 /foo/apple

vue 路由器的默认设置是使用hashbang 方法。这依赖于使用 index.html（或任何默认为 / url）页面，因为它之后的所有内容都不会被视为 url 位置的一部分，而是传递到应用程序中.例如，在锚 <a href="index.html#first-heading">1st heading</a> 中，这将转到页面的一部分，如果您已经在该页面上，则不会被重定向。

Vue 路由在生产环境中无法正常工作

Vue Routes does not work properly in production

routing

vue.js

server

vue-router

vuejs2