2

I have built a Vue app that is deployed within a WordPress Page on a WordPress site and it works really well.

However I have one issue that I am trying to solve.

The app runs on the a url something like this

https://www.examplesite.com/vue-app

Since the router history mode is set to history: createWebHashHistory() the url shows as follows

https://www.examplesite.com/vue-app/#/

Routed pages something like this

https://www.examplesite.com/vue-app/#/style/123

When I set history mode to createWebHistory() to use HTML5 Routing in Vue I encounter an issue. The page routes to the 404 page of my Vue app and trying to access a routed page gives a server 404

I understand why this is happening and that I need to setup some rewrite rules on the server to handle this but I have no idea how.

Has anyone else had to do this before and any ideas how?

isherwood
  • 58,414
  • 16
  • 114
  • 157
AndyJamesN
  • 468
  • 4
  • 14
  • 1
    I've found some references and probably resolves this. You need to change or create the `.htaccess` file at root folder of Wordpress (generally is already created). And use the codes from these links: [1](https://stackoverflow.com/questions/52119135/vue-router-on-apache-spa-in-sub-directory-can-only-access-pages-by-redirect) or [2](https://stackoverflow.com/questions/71635582/vue-js-spa-redirecting-to-index-html-with-htaccess-does-not-work-for-every-page) or [3](https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee) hope it helps! – lestra Aug 19 '22 at 05:32
  • Just be careful that the rewrite rules/conditions for Vue don't f*** up the rules and conditions added by wordpress. So just adding the rules @lestra linked may be not enough. [This one](https://wordpress.stackexchange.com/questions/334342/wordpress-and-vuejs-routing-problem) might be helpful as well – Alex Berger Aug 19 '22 at 14:54

0 Answers0