VueRouter en mode: 'history' con Servidor Apache

vue-router

#1

Buenas noches comunidad. Escribo para solicitar su ayuda.
Tengo un sitio web (www.sitioweb.com.ar) que necesito agregar un blog. Este sitio web está alojado en un webhosting con Apache (esto no lo puedo cambiar) y estoy utilizando Vue + Vue-Router para rutear páginas dentro del blog.
Comencé a desarrollarlo con webpack y sus modulos y funciona de maravilla. Antes de seguir con el desarrollo se me ocurrió probarlo en el webhosting y funcionó bien.
Luego de esa prueba me pareció oportuno cambiar el mode del router y lo configuré como “history” y ya no me anduvo más.
Seguí las recomendaciones de Vue router mode history y creé un archivo .htaccess para redirigir todas las rutas al index pero tampoco responde. También probé con otro método que para algunos funcionó en este foro (FallbackResource) pero tampoco.
Tengo dudas de si estoy ubicando bien el archivo htaccess o si estoy omitiendo algún paso importante.
Agrego que tambien hice pruebas en un apache local donde tengo todas las posibilidades de iniciar modulos y tampoco me funcionó. Les cuento como están mis directorios:

htdocs
pruebaVueRouter
    blog
        js
           build.js
    index.html
    .htaccess

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

Mi .htaccess version 2: FallbackResource index.html

La verdad que no termino de entender qué esta haciendo el htaccess para saber qué modificar.

Mi pagina en mode: hash:

Mi pagina en modo: history:

En apache el mod_rewrite está cargado.

Agradezco por anticipado toda la ayuda que me puedan ofrecer.
saludos
Pablo


#2

Es una pregunta popular, seguro que encuntras la solucion googleando un poco. Por ej: https://serverfault.com/questions/188373/apache-2-2-rewrite-force-all-requests-to-index-html

En cualquier caso podrias probar tu App en netlify o similar con el history mode y comprobar que funciona correctamente (en eso te puedo ayudar). Despues contactar con el soporte de tu servidor si sigue sin funcionar.


#3

@miljan gracias por tu respuesta. Es cierto, esta lleno de respuestas similares pero no me estaban funcionando o aparentemente no me estaba funcionando. Seguí realizando pruebas y me dí cuenta que sí está funcionando el .htaccess, se las comparto:
Mi .htaccess1: RewriteEngine On RewriteCond %{REQUEST_URI} !^/index.html$ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$ RewriteRule . index.html [L]
Con esta configuracion responde así


es decir, cualquier ruta que no sea index.html me lo redirige bien al index.html. Pero noten que (ademas de que me falta la foto), no me esta mostrando la ruta raiz del vue-router. En una imagen del post original pueden observar que debe decir “BlogList”.
¿y como comprobé que sí estaba funcionando el .htaccess?
Mi .htaccess2:
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . prueba/index.html [L]

El directorio prueba/… no existe

mi pagina:

Por lo que puedo comprobar que el htaccess sí esta redirigiendo, y por el contrario a lo que creía tengo algun problema con el vue-router.

Este es mi main.js
import Vue from ‘vue’
import App from ‘./App.vue’
import VueRouter from ‘vue-router’

import routes from ‘./routes’
Vue.use(VueRouter)

const router = new VueRouter({ routes, mode: ‘history’ })

new Vue({
el: ‘#app’,
router,
render: h => h(App)
})

Mi route.js

import BlogArticle from './components/Pages/BlogArticle.vue'

import BlogEditArticle from ‘./components/Pages/BlogEditArticle.vue’
import BlogEditUser from ‘./components/Pages/BlogEditUser.vue’
import BlogList from ‘./components/Pages/BlogList.vue’
import BlogLogin from ‘./components/Pages/BlogLogin.vue’
import BlogNewArticle from ‘./components/Pages/BlogNewArticle.vue’
import BlogNewUser from ‘./components/Pages/BlogNewUser.vue’
import BlogPanel from ‘./components/Pages/BlogPanel.vue’
import BlogUsers from ‘./components/Pages/BlogUsers.vue’

const routes = [
{ path: ‘/BlogArticle’, component: BlogArticle, name: ‘BlogArticle’ },
{ path: ‘/BlogEditArticle’, component: BlogEditArticle, name: ‘BlogEditArticle’ },
{ path: ‘/BlogEditUser’, component: BlogEditUser, name: ‘BlogEditUser’ },
{ path: ‘/BlogLogin’, component: BlogLogin, name: ‘BlogLogin’ },
{ path: ‘/BlogNewArticle’, component: BlogNewArticle, name: ‘BlogNewArticle’ },
{ path: ‘/BlogNewUser’, component: BlogNewUser, name: ‘BlogNewUser’ },
{ path: ‘/BlogPanel’, component: BlogPanel, name: ‘BlogPanel’ },
{ path: ‘/BlogUsers’, component: BlogUsers, name: ‘BlogUsers’ },
{ path: ‘/’, component: BlogList, name: ‘BlogList’ }
]

export default routes

que como les contaba antes con el mode: hash de vue-router funciona bien.
Evidentemente el vue-router con el Apache tiene alguna configuración adicional o alguna mala relación en el mode history o estoy equivocado en algo de lo que estoy haciendo y no me doy cuenta.

una vez mas agradezco su ayuda.
saludos
Pablo


#4

Todo ocurre en el lado del cliente, por lo que Vue ni VueRouter son conscientes ni pueden afectar al servidor en modo alguno. El VueRotuer mode es de nuevo, del lado del cliente y eligas el modo que eligas, la App se ejecutara y mostrara las rutas correctamente. Lo que tienes que comprobar es que ocurre cuando estas en una ruta y refrescas la pagina, alli radica la diferencia.

El error que ves al ejecutar la App en tu servidor es, probablemente, por que no has indicado la baseUrl cuando has compilado tu app, por lo que todas las urls fallan.


#5

ahora si!!! ahí tenía el problema. yo estaba considerando el valor default de VueRouter.base = ‘/’ como el path de mi ruta. Pero en realidad es el raiz del servidor. Lo cambié tal como dijiste y funcionó.

const router = new VueRouter({ routes, mode: 'history', base: '/pruebavuerouter' })

@miljan te agradezco mucho por tu tiempo y ayuda
saludos
Pablo