Reload routes not working with Vue Router

Question

I just finished to build my portfolio on Vue.js 2 and went live. I have three views. When I reload the home view it's ok but on the two other ones I have several error messages.

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. Work:30 A parser-blocking, cross site (i.e. different eTLD+1) script, No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website.com' is therefore not allowed access. The response had HTTP status code 403.

It's the first time for me to go live with a single page webapp architecture. Any idea to fix this please?

Here is the router file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Work from '@/views/Work'
import About from '@/views/About'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/Work', component: Work },
    { path: '/About', component: About }
  ]
})

Sure @webnoob but which one as I don't know from where comes the issue... I will post my router code and please do not hesitate if you want to see something else. :) Also In Dev mode everything is fine but the problem occure in production. — BeeLee
– BeeLee, Commented Dec 25, 2017 at 18:35
You right! It seems to be the solution. Thank you for your time and attention :) Merry Christmas!!! — BeeLee
– BeeLee, Commented Dec 25, 2017 at 19:00
No problem, I've added an answer so others know how to fix. Feel free to tick it :) — webnoob
– webnoob, Commented Dec 25, 2017 at 19:07

webnoob · Accepted Answer · 2025-02-03 10:31:20Z

6

Take a look at the example configurations on the Vue Router website. They often fix issues that happen server side when all is in dev.

edited Feb 3 at 10:31

answered Dec 25, 2017 at 19:06

webnoob

16k13 gold badges87 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Beck Over a year ago

@BeeLee vue-cli only sets up the clientside code; server config still has to be done separately.

Kiran Parajuli Feb 1 at 17:06

The link in the answer has expired. Please refer to this: router.vuejs.org/guide/essentials/…

primegxy · Accepted Answer · 2019-05-07 02:09:41Z

1

In some special cases, this trick will not work, like when your project is in the subfolder on your domain.

For that, you have to add these lines. Replace your subfolder name with

{Your sub folder name}

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /{Your sub folder name}/index.html [L]

Only apply to apache. Message me if you need any help for deploying you app on apache.

answered May 7, 2019 at 2:09

primegxy

1,88821 silver badges25 bronze badges

1 Comment

user3870081 Over a year ago

Very nice! That helped me.

rozsazoltan · Accepted Answer · 2025-02-03 10:44:51Z

As mentioned earlier, the Vue Router documentation also states that on your own web server, you need to redirect all incoming requests to a single file—the index.html file of your Vue project. This way, whether the request is http://example.com/first-page or http://example.com/second-page, etc., Vue will start running through index.html, allowing Vue Router to interpret the current URL and determine whether the "first" or "second" page has been requested.

Apache

You can achieve this in different ways depending on the web server you are using. With Apache, the .htaccess file is responsible for redirecting incoming requests to the appropriate file. This file should be placed in the folder to which the incoming requests for your domain are directed.

<IfModule mod_negotiation.c>
  # Disable MultiViews to prevent content negotiation issues
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  # Enable URL rewriting
  RewriteEngine On
  RewriteBase /

  # Don't rewrite requests for the index.html file
  RewriteRule ^index\.html$ - [L]

  # If the requested file doesn't exist, continue rewriting
  RewriteCond %{REQUEST_FILENAME} !-f
  # If the requested directory doesn't exist, continue rewriting
  RewriteCond %{REQUEST_FILENAME} !-d

  # Redirect all other requests to index.html
  RewriteRule . /index.html [L]
</IfModule>

RewriteRule directive - Apache Docs
Apache redirect rules - Vue Router Docs

Collectives™ on Stack Overflow

Reload routes not working with Vue Router

3 Answers 3

2 Comments

1 Comment

Apache

Other

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Apache

Other

Comments

Your Answer

Sign up or log in

Post as a guest

Related