Vue JS Cli project with a folder not affected by Vue Router

Question

I've built a Vue Cli app and it will replace a current static site at the top level domain.

However, the current site it is replacing needs to be kept alive (and working) within a sub-folder. Ideally, when navigating to this sub-folder site, I would like to be completely isolated and independent from Vue.

Under normal circumstances I could probably utilise the /static folder, but for this task I cannot. The 2 projects cannot be mixed together in this way.

Ideal scenario:

https://example.com (Vue Cli project)
https://example.com/my-page/ (Vue Cli project)
https://example.com/another-page/ (Vue Cli project)
https://example.com/old-site/ (Legacy static project)
https://example.com/old-site/my-page/ (Legacy static project)

Is this possible? At the moment if I do this, Vue Router will give me a 404 due to how my routes are set up at the top-level (wildcard route):

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'AppHome',
      component: AppHome
    },
    {
      path: '*',
      name: 'AppError',
      component: AppError
    }
  ]
})

I just basically want to allow linking off to a sub-folder on the server and not get Vue Cli / router involved.

Help much appreciated. Thank you.

Maurice Wijnia · Accepted Answer · 2018-01-25 12:27:47Z

2

You probably have your webserver setup to route every request to https://example.com/* to https://example.com. This is necessary to let the vue router handle the routing wihtout having to put hashtags in every url (https://example.com/#/my-page).

In order to let your webserver return the old site when you make a request to https://example.com/old-site you'll have to configure your webserver so it returns that folder instead of serving https://example.com like you want with every other request. How you do this depends on the webserver you're using, but I'm sure you'll be able to figure that out.

answered Jan 25, 2018 at 12:27

Maurice Wijnia

1016 bronze badges

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

1 Comment

Michael Giovanni Pumo Over a year ago

Ah thank you. I guess you're right. It will need to be intercepted at the server level before any JS gets involved.

Borjante · Accepted Answer · 2018-01-25 12:31:43Z

2

In my opinion this has no correlation with VueJS but with your webserver (Apache/Nginx).

In case of nginx you could just add new location

location /old-site {
   root /old-site-dir/;
   try_files $uri $uri/ =404;
}

answered Jan 25, 2018 at 12:31

Borjante

10.7k6 gold badges40 silver badges63 bronze badges

4 Comments

Michael Giovanni Pumo Over a year ago

Okay thanks...I'm using Apache, any ideas there at all?

Borjante Over a year ago

Ugh... I'm not confident nor experienced with apache sorry. If you have time, I definetly recommend learning some basics about nginx. It is quicker and easier to configure.

Hammerbot Over a year ago

Apache has Location directives too, I can't find a lot of documentation about it tho... httpd.apache.org/docs/2.4/mod/core.html#location

Borjante Over a year ago

Apache configuration files are really a big headache.. really confusing...

Collectives™ on Stack Overflow

Vue JS Cli project with a folder not affected by Vue Router

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related