How to deploy using @nuxtjs/router

I have followed the tutorial but i keep getting a 404 when i navigate to the pages link. Here is my nuxt.config.js

`const nodeExternals = require('webpack-node-externals') const resolve = (dir) => require('path').join(__dirname, dir) const webpack = require('webpack') require('dotenv').config() const pkg = require('./package')

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = { mode: 'universal',

env: { apiUrl: process.env.API_URL || 'http://localhost:8000/api', appUrl: process.env.APP_URL || 'http://localhost:4000', blogUrl: process.env.BLOG_API_URL || 'http://localhost:9000', appKeywords: process.env.APP_KEYWORDS || "Test Auth", appDescription: process.env.APP_DESCRIPTION || "Test Auth", appName: process.env.APP_NAME || 'eDoctar Auth', appEmail: process.env.APP_EMAIL || 'support@test.com', appDeveloper: process.env.APP_DEVELOPER || 'Test', appDeveloperEmail: process.env.APP_DEVELOPER_EMAIL || 'test@test.com', appLocale: process.env.APP_LOCALE || 'en' },

/* ** Headers of the page */ head: { title: process.env.APP_NAME, titleTemplate: '%s - ' + process.env.APP_NAME, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.APP_DESCRIPTION }, { hid: 'keywords', name: 'keywords', content: process.env.APP_KEYWORDS }, { hid: 'author', name: 'author', content: process.env.APP_DEVELOPER }, { hid: 'ogtitle', property: 'og:title', name: 'og:title', content: process.env.APP_NAME }, { hid: 'ogimage', property: 'og:image', name: 'og:image', content: '//logo.png' }, { hid: 'ogdescription', property: 'og:description', name: 'og:description', content: process.env.APP_DESCRIPTION }, { hid: 'ogurl', property: 'og:url', name: 'og:url', content: process.env.APP_URL } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }, { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.7.1/css/all.css', integrity: 'sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr', crossorigin: 'anonymous' } ] },

/* ** Customize the progress-bar color */ loading: '~/components/Loading.vue',

/* ** Global CSS */ css: [ 'element-ui/lib/theme-chalk/index.css', '/assets/style/app.styl', '/assets/style/app.scss' ],

/* ** Plugins to load before mounting the App */ plugins: [ '@/plugins/vuetify', '@/plugins/axios', '@/plugins/element-ui', { src: '@/plugins/vee', ssr: true }, { src:'~plugins/spinner', ssr: false }, ],

/* ** Nuxt.js modules / modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/pwa', '@nuxtjs/router', '@nuxtjs/dotenv', 'vue-sweetalert2/nuxt' ], / ** Axios module configuration */ axios: { // See https://github.com/nuxt-community/axios-module#options baseURL: process.env.API_URL, browserBaseURL: process.env.API_URL_BROWSER, // proxy: true, progress: true },

/* ** Customize the generated output folder */ generate: { dir: 'public' },

/* ** Customize the base url */ router: { base: '/auth/' },

/* ** Build configuration */ build: { transpile: ['vuetify/lib'], plugins: [new VuetifyLoaderPlugin()], loaders: { stylus: { import: ["~assets/style/variables.styl"] } },

/*
** You can extend webpack config here
*/
extend(config, ctx) {
  
}

} } `

Please what am i missing out?