Issue with Vue application deployed to subdirectory when route changes from publicPath

Question

We have a Vue application that we're deploying to a subdirectory: /deploypath/

Right now, we have vue.config.js as:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production'
    ? '/deploypath/'
    : '/',
  transpileDependencies: [
    'vuetify'
  ]
}) 

Here's what's happening: In index.js (router) I have multiple paths configured to return multiple views and components. When a user is logged in, they can access additional pages. When they're not logged in, they're redirected to a (landing page).

I have multiple routes defined:

const routes = [
      {
        
        path: '/deploypath',
        name: 'feature1',
        component: FeatureOneView,
        meta: {
          title: 'Feature One',
        }
      },
      {
        
        path: '/deploypath/notloggedin',
        name: 'notloggedin',
        component: NotLoggedInView,
        meta: {
          title: 'Landing',
        }
      }
    ]

const router = new VueRouter({
  mode: 'history', 
  routes: routes 
}); 

Now, the issue I'm running into is that (after deploying a production build) when I visit /deploypath it works, however any other path (e. g. /deploypath/notloggedin) doesn't work. We have an Ubuntu instance running with nginx.

Are we doing something wrong with the Vue config or is there an issue on the nginx side, or other?

Answer 1

In case it helps anyone, a good buddy of mine helped find a solution:

cd /etc/nginx/sites-available

then:

sudo vim <insert your site's conf file here> 

then press "i" to edit and within the top-level server { ... } section paste in (replace "dirname" with the name of the subdirectory you're hosting your Vue application in):

location ^~ /dirname {
               try_files $uri /dirname/index.html =400;
        }

then press escape (esc) on keyboard, then type ":wq" and press enter to save.. Then run:

sudo service nginx restart

then refresh your browser window and hopefully you see your Vue app!