Vue.js App Deployment successful but failing to load page

Support
, , ,
#1

Hi,

Netlify: https://inspiring-jepsen-e1b12b.netlify.app/
Github Repo: GitHub - piaschwarz/RePOS-2021-MentalRotation-PS26

I depolyed my github repo through netlify and the build/deploy was successful except the warning:

asset-size-limit-warning
asset-size-limit-warning967×435 72.2 KB

The site is showing as a blank page, the web console shows a few 404 errs and loading failed errs:

GEThttps://inspiring-jepsen-e1b12b.netlify.app/test/css/chunk-vendors.374a7cc0.css [HTTP/2 404 Not Found 19ms]

GEThttps://inspiring-jepsen-e1b12b.netlify.app/test/js/app.1de69cf8.js [HTTP/2 404 Not Found 22ms]

GEThttps://inspiring-jepsen-e1b12b.netlify.app/test/js/chunk-vendors.bfc5995c.js [HTTP/2 404 Not Found 29ms]

Loading failed for the with source “https://inspiring-jepsen-e1b12b.netlify.app/test/js/chunk-vendors.bfc5995c.js”. inspiring-jepsen-e1b12b.netlify.app:1:1

GEThttps://inspiring-jepsen-e1b12b.netlify.app/test/js/app.1de69cf8.js [HTTP/2 404 Not Found 34ms]

Loading failed for the with source “https://inspiring-jepsen-e1b12b.netlify.app/test/js/app.1de69cf8.js”.

Is the asset size limit warning the problem here? I tried fixing it with adding size information to vue.config.js but then the deployment failed:

performance: {
      maxEntrypointSize(400000)
      maxAssetSize(400000)
}
#2

This is the web console error screenshot:

loading-error-netlifyapp
loading-error-netlifyapp1336×251 67.4 KB

#3

Hi @piaschwarz

The issue stems from vue.config.js

publicPath:
    process.env.NODE_ENV === 'production'
      ? '/' + require('./package.json').name + '/'
      : '/'

As the build is in production mode, the name from the package.json is added to the public path (test in this case).
However, none of the files are built to test they are built to /. For example inspecting the source I see

<script src="/test/js/app.60bb3f68.js"></script>

however the file is at /js/app.60bb3f68.js.

#4

Hi @coelmay

thanks for the fast response and the hint.
I fixed it by setting the public path to:

publicPath: '/'

The site is now running :blush:

1 Like
#5

Thanks for sharing your solution! This will definitely be beneficial for a future Forums member who encounters the same issue!