我有一个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/about
或http://localhost:8080/test/contact
,它们不会被解决,而是推到404默认错误页面-GET http://localhost:8080/test/contact 404 (Not Found)
这显然是一个不完整的设置,我不知道是什么,请帮助. Tx.
1条答案
按热度按时间vshtjzan1#
FallbackResource /test/index.php
-而且问题奇迹般的解决了!