History Mode Vue SPA Configuration

I’m probably making some silly mistakes, but can’t for the life of me figure out what’s up. I’m trying to serve an SPA for the public assets folder, and redirect root requests to the app.

First, I’ve configured Play for serve public assets at the root of my Vue.js app.

Selection_453

Then, I’ve configured my routes (which is most likely where the issue lies.

Finally, here are the two actions that are setup to redirect and serve the SPA.

The result of all of this is a blank page.

image

In case anyone else runs into this, it’s not a Play issue. It’s the fact that I have to tell my Vue app about it’s public path (which feels wrong, but nevertheless…)

module.exports = {
  "publicPath": '/app',
  "transpileDependencies": [
    "vuetify"
  ]
}

So that redirects properly and now shows the page correctly given it adds the correct prefix. Saying that, I want the SPA to do the routing from the /app route, not the server. The SPA routes just fine when I run it locally via npm run serve, but not when it’s run via the Play server.

I’m configured to run History mode, because I don’t want the # in my URL.

const router = new VueRouter({
  mode: 'history',
  base: '/app/',
  routes
})

Thanks for your help in advance!

All right, I think I’ve got it working. The last route, I always serve the root SPA.