How to deploy a Vue.JS MPA (Multi Page Application)

Question

I created a multipage application using vue.js with vue.config.js method i developed it with no problems i created a production build i can access home page however i cannot access other pages like about us, portfolio etc.

What could be the issue?? and how to solve it? is it about the .htacess?

here is my vue.config.js code

module.exports = {
    pages: {
      index: {
        entry: './src/pages/Home/main.js',
        template: 'public/index.html',
        title: 'Welcome to Appclust',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      about:{
        entry: './src/pages/About/main.js',
        template: 'public/index.html',
        title: 'About us',
        chunks: ['chunk-vendors', 'chunk-common', 'about']
      },
      portfolio:{
        entry: './src/pages/Portfolio/main.js',
        template: 'public/index.html',
        title: 'Portfolio',
        chunks: ['chunk-vendors', 'chunk-common', 'portfolio']
      },
      testimonials:{
        entry: './src/pages/Testimonials/main.js',
        template: 'public/index.html',
        title: 'Testimonials',
        chunks: ['chunk-vendors', 'chunk-common', 'testimonials ']
      },
      careers:{
        entry: './src/pages/Careers/main.js',
        template: 'public/index.html',
        title: 'Careers',
        chunks: ['chunk-vendors', 'chunk-common', 'careers']
      },
      contact:{
        entry: './src/pages/Contact/main.js',
        template: 'public/index.html',
        title: 'Contact',
        chunks: ['chunk-vendors', 'chunk-common', 'contact']
      }
    }
  }

this is my file structure

production files

for tasks like multipages i would suggest to use nuxt instead of vue CLI — bill.gates, Jul 02 '20 at 06:41

score 2 · Answer 1 · answered Jul 02 '20 at 06:44

2

Enable mode:history for pretty URL in vue-router without hashbang
since your project is SPA from beginning, the Crawler/server doesn't recognize your routes after new visit/refresh of the route (because /about missing index.html as it expected.)
Yes you can set redirect rules in the .htaccess for the missing routes.

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# otherwise use history router
RewriteRule ^ /index.html

Optional: If you wished to generate prerendered static HTML files for each routes, prerender-spa-plugin is a good addition into your project build. If you wished to build MPA from beginning, go NUXT.

answered Jul 02 '20 at 06:44

SC Kim

545
4
14

will .htaccess do the job? – Being MR.G Jul 02 '20 at 07:30
1

Yes it should do the job. Solved previously with AngularJS with Shared Hosting – SC Kim Jul 02 '20 at 09:03
Should i copy paste the same thing?? i mean htaccess you gave?? or should i do some modifications?? i copy pasted the same thing but no matter what page i click it goes to home or index page. i deleted this line "# otherwise use history router RewriteRule ^ /index.html" then i got errors when i tried to navigate to other pages – Being MR.G Jul 03 '20 at 18:23
1

@BeingMR.G likely some changes, you may refer more here about History mode with Vue: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations – SC Kim Jul 04 '20 at 11:38
thank you i got it fixed. Do you know how to add meta tags in MPA ?? since i am not using Nuxt i have no clue how to add meta description on each pages – Being MR.G Jul 06 '20 at 05:54
1

you may use vue-meta for the dynamic keywords, description and title etc. It's compatible with NUXT and Vue as well. And please kindly green tick the answer if resolved :) Cheers – SC Kim Jul 07 '20 at 09:09

How to deploy a Vue.JS MPA (Multi Page Application)

1 Answers1