在 apache 上重新加载后找不到 VueRouter 页面

Question

我遇到了这个问题：当我在主页上重新加载 vue 应用程序时，一切正常。当我在另一个子站点上重新加载页面时，页面显示 404。

我在我的项目中使用路由器模块。我尝试调整 vue.config.js 并将 publicPath 设置为 '/' 和 ''。将其设置为“/”时，我无法在本地复制该问题。当路径设置为 '' 时，我在本地和 apache 上遇到相同的错误。

我尝试应用一些重定向规则和条件，但我在网上找到的解决了同样问题的规则和条件不起作用。

我尝试在我的路由器中使用 catchall 路由但没有成功。

有人遇到类似问题吗？谢谢！

路由器

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/contact-imprint',
    name: 'contact',
    component: () => import('../views/Contact.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/',
  transpileDependencies: true
})

apache 配置

<VirtualHost *:80>
    ServerName domain.io
    ServerAlias www.domain.io
    ServerAdmin daniel@domain.io
    DocumentRoot /var/www/domains/domain/

    ErrorLog ${APACHE_LOG_DIR}/error-domain.log
    CustomLog ${APACHE_LOG_DIR}/access-domain.log combined

    <Directory /var/www/domains/domain/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    # my default rewrite cond/rule
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =domain.io [OR]
    RewriteCond %{SERVER_NAME} =www.domain.io
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

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

</VirtualHost>

Answer 1

以防未启用

sudo a2enmod rewrite

添加重写

<Directory /var/www/domain/>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
</Directory>

并重新启动 services apache2 restart 帮助我解决了问题。

在 apache 上重新加载后找不到 VueRouter 页面

VueRouter pages not found after reloading on apache

apache

vue.js