I have a basic testing app with Vue v3 that I want to deploy on an Apache/php web server. The app it is not served from the root but from a subfolder, 'test'. I have followed the official docs https://router.vuejs.org/guide/essentials/history-mode.html to make the settings.
So far the code for 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>Inside the /play directory there is the .htaccess file:
<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>
It is working partially, in the sense that if browsed from http://localhost:8080/test/ it is displayed, the links redirect correctly from the app, but there is one (big!) issue: if I browse directly http://localhost:8080/test/about or http://localhost:8080/test/contact they are not resolved, instead pushing to 404 default error page - GET http://localhost:8080/test/contact 404 (Not Found)
It is obviously an incomplete setting, I can't figure out what, please help. Tx.
FallbackResource /test/index.php- and the problems solved miraculously!