Devserver has problems serving static assets with assetsPublicPath != '/'

Hello I have made a Vuetify app using vue-cli and vue init vuetifyjs/webpack-advanced the resulting code is this https://github.com/vuetifyjs/webpack-advanced/tree/master/template

The problem I have is that my production app isn’t in the root of the server and it is a subpath in www.example.com/foo. When I run npm run build all my static assets like images and fonts are referenced like /static/images/example.png, so the server doesn’t find them as they are being looked in www.example.com/static/images/example.png instead of www.example.com/foo/static/images/example.png

If I change config/index.js and set assetsPublicPath: '/foo' and change all my references from /static/... to /foo/static/... then my production server finds all my static assets but then my dev server using npm run dev can’t find them as they are being referenced as localhost:8080/foo/static/images/example.png but they seem to be at localhost:8080/static/images/example.png for some reason.

My ideal solution would be just to keep the references as /static and tell webpack or vueloader somehow that on npm run build it should prepend /foo to all of my assets urls. If that is impossible at least I would like to know a way to make my dev and production environments to work with the same code even though it implies to prepend manually /foo to my static assets urls

Thank you

[alxppp]

Thanks @LinusBorg! That has been bugging me for a while now. The latest development branch is working fine for me!

Two small hints for others updating from the old dev server:

• Instead of assetsPublicPath: '/abc/' it now has to be assetsPublicPath: '/abc'
• To get browser reloads working again, I had to change history api fallback to:

historyApiFallback: {
  rewrites: [
    { from: /.*/, to: `${config.dev.assetsPublicPath}/index.html` },
  ],
},

[SirM2z]

Hello @LinusBorg My browser generated extra duplicate requests when I added this configuration

historyApiFallback: {
  rewrites: [
    { from: /.*/, to: `${config.dev.assetsPublicPath}/index.html` },
  ],
},

before modifying:

after modification:

I found that extra requests are related to favicon.ico.

But it can work normally when I change back historyApiFallback: true