Search code examples
vue.js.htaccessxampp

.htaccess disables javascript for vue SPA app


i have a Vue app that uses router and i have a route for (forgot my password) in form ../rp/:id like below

export const routes = [
  {
    path: '/rp/:id',
    name: 'resetPassword',
    component: resetPassword,
    props: true
  }
]

const router = new vueRouter({
  routes,
  mode: 'history'
});

i'm using nodejs as backend and i send the email but when i click on the email link to redirect me to resetPassword component i get

We're sorry but the app doesn't work properly without JavaScript enabled. Please enable it to continue.

i'm using .htaccess written as follow:

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

i don't know why it disable javascript

my index.html file contents are below:

<!DOCTYPE html>
<html>
  <head>
    <noscript>
      <strong>We're sorry but the app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">
    <title>Restaurants</title>
  </head>
  <body style="height: 100vh">
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

can anyone help me with this? why it disable javascript?

thanks in advance


Solution

  • yes! finally i got it to work,it was a very silly mistake that stopped me 2 days

    it was vue router fault not htaccess /Restaurant/rp/:id not only /rp/:id

    as follow:

    export const routes = [
      {
        path: '/Restaurant/rp/:id',
        name: 'resetPassword',
        component: resetPassword,
        props: true
      }
    ]
    
    const router = new vueRouter({
      routes,
      mode: 'history'
    });
    

    good luck everybody!