CODEWITHSUNDEEP
vue.jsvue-componentvue-routervuejs-routing
Being MR.G
Being MR.G

Reputation: 91

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

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 enter image description here

production files

enter image description here

Upvotes: 4

Views: 4880

Answers (1)

SC Kim
SC Kim

Reputation: 600

  1. Enable mode:history for pretty URL in vue-router without hashbang
  2. 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.)
  3. 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
  1. 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.

Upvotes: 2

Related Questions