Vue Router nested paths break static resource paths when manually updated

We are using VueJS 2.x with the vue-cli webpack template along with Vue Router. We ran into an issue when the following happens:

• Our static assets are located in a static folder with the root level

• Resource paths are defined in the /index.js Webpack config file:

  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  
        
  
          
          
          
        
  
      

• Vue Router runs in history mode and we're following the official docs. to enable the required Apache rewrite rule when starting the router in history mode.

Our routes file has multiple nested paths like / dashboards / sampleDashboard

When navigating the nested path through site navigation, everything works fine. However, moving around manually (or refreshing the browser) breaks the path of static assets. The static resources path at this point includes the nested route path, so something like http: // localhost: 5001 / static / bootstrap / boostrap.min.css turns into http: // localhost: 5001 / dashboards / static / bootstrap / boostrap .min.css

This does not happen for sibling paths like / reports, but only when we have a 2-tier nested route.