Vue 路由器托管问题 apache2

Question

我在我的 vue 应用程序中使用历史记录模式，当我构建项目并尝试运行它脱离服务器时，只有大约一半的路由正常工作。另一半return一个404.

我浏览了文档并检查了 SO 上类似问题的所有其他答案，none 的解决方案对我有用。

我试过在根 dist 文件夹中添加一个 .htaccess 文件，我试过在默认的 .conf 和站点特定的 .conf 中添加，但没有任何效果。

.htaccess 文件在 dist 文件夹中

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这是指向我的 dist 文件夹的 apache 配置，我也试过在这个文件的底部添加上面的代码，但没有成功。

<VirtualHost *:80>
        ServerName Sitename
        ServerAlias Sitename
        Redirect permanent / Sitename
</VirtualHost>
<VirtualHost *:443>
        ServerName Sitename
        ServerAlias Sitename
        DocumentRoot "/var/www/Sitename/dist"
        ProxyPreserveHost On
        ProxyPass /api http://127.0.0.1:5010/api
        ProxyPassReverse /api http://127.0.0.1:5010/api
        SSLEngine On
        SSLCertificateFile /etc/letsencrypt/live/Sitename/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/Sitename/privkey.pem
</VirtualHost>

Vue 路由代码

const router = new VueRouter({
  routes,
  mode: 'history',
  base: "/",
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
        return {selector: to.hash}
    } else {
        return { x: 0, y: 0 }
    }
  }
})

所以如果 dist 文件夹是根文件夹，为什么 .htaccess 代码没有修复部署时的路由器历史记录问题？从这个网站上每个人的回答来看，这似乎是解决方案，但它不起作用。我错过了什么吗？

Answer 1

我通过将此行添加到 sites-enabled.conf 文件的底部解决了这个问题

FallbackResource /index.html

Vue 路由器托管问题 apache2

Vue Router hosting issue apache2

apache2

vue.js

vue-router