Apache网站上的Vue v3路由器和具有不同基础的HTML5历史模式无法正常工作

x6492ojm  于 2023-03-31  发布在  Apache
关注(0)|答案(1)|浏览(125)

我有一个Vue v3的基本测试应用程序,我想在Apache/php Web服务器上部署。该应用程序不是从根目录而是从子文件夹“test”提供服务。我已经按照官方文档https://router.vuejs.org/guide/essentials/history-mode.html进行了设置。
到目前为止index.php的代码:

<!DOCTYPE html>
<html>

<head>
    <title>T2 test</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>

<body>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/contact">Contact</router-link>
        <router-view></router-view>
    </div>
    <script>
        const Home = {
            template: '<h5>Home</h5>'
        }
        const About = {
            template: '<h5>About</h5>'
        }
        const Contact = {
            template: '<h4>Contact</h4>'
        }

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHistory('/test/'),
            routes: [{
                    path: '/',
                    component: Home
                },
                {
                    path: '/about',
                    component: About
                },
                {
                    path: '/contact',
                    component: Contact
                }
            ],
            base: '/test/'
        })

        const app = Vue.createApp({})
        app.use(router)
        app.mount('#app')
    </script>
</body>

</html>

在/play目录中有.htaccess文件:

<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>

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

它是部分工作的,从某种意义上说,如果从http://localhost:8080/test/浏览,它会显示,链接从应用程序正确重定向,但有一个(大!)问题:如果我直接浏览http://localhost:8080/test/abouthttp://localhost:8080/test/contact,它们不会被解决,而是推到404默认错误页面-GET http://localhost:8080/test/contact 404 (Not Found)
这显然是一个不完整的设置,我不知道是什么,请帮助. Tx.

vshtjzan

vshtjzan1#

FallbackResource /test/index.php-而且问题奇迹般的解决了!

相关问题