Issue

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?

Solution

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!

Answered By - codr

Answer Checked By - Marie Seifert (WPSolving Admin)

Thursday, October 6, 2022

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

Issue

Solution