vue.js apache 中的路由问题

Question

我有一个 vue.js 应用程序，它带有 vue 路由器来渲染各种组件。我有一个加载主页组件的路径 /home。在开发环境中，我可以通过在地址栏中输入 localhost:8080/home 以及使用 <router-link> 设置 link 来转到该组件。当我将生产版本部署到 apache 服务器时，当我给出 localhost/home 时出现错误

The requested URL /home was not found on this server.

但是 link 可以正常工作，当我们单击 link 时地址栏中会显示 localhost/home 为什么会这样？如何解决？

Answer 1

在路由器实例中，我使用了历史模式，它给出了一个没有散列 (#) 的 URL。我将模式形式 'history' 更改为默认的 'hash'，它解决了我的问题。

Answer 2

直接来自 Vue 路由器网站。

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

const router = new VueRouter({ mode: 'history', routes: [...] }) When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
  try_files $uri $uri/ /index.html;
}
Native Node.js
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

[0] https://router.vuejs.org/en/essentials/history-mode.html

vue.js apache 中的路由问题

vue.js routing issue in apache

apache

vue-router