Blank screen when deploying a Vue app

Support
, , , ,
#1

URL: https://badmintoon.netlify.app/
Deploy process: Finishes without error.
Problem: I only see a blank page.
Github repo: GitHub - ShetlandJ/badmintoon-netlify

Hello,

I can’t get my Vue app to display after deploying it to Netlify. The errors in the console are about 404s to the js, css and html files:

image

I have tried a bunch of tutorials around “how to deploy Vue to netlify” but unfortunately each time I do, I end up with this situation. I tried adding a netlify config file, which looks like this:

[build]
  command = "yarn build"
  publish="/dist"
  base = ""

But it doesn’t seem to make a difference. i’m using my build script:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

I would appreciate any help to get it live - just to confirm, the repo runs fine locally. I hope this is enough information to go on! Thanks

#2

Hi @ShetlandJames Welcome to the Forums

As you can see from the 404 errors, Vue is prefixing all your assets with /badmintoon-netlify/ even though this directory doesn’t exist.

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/badmintoon-netlify/" : "/",
  };
  1. This is due to the publicPath config in your vue.config.js file.
  2. Try changing publicPath to / (without the conditional)

Hope this helps :slight_smile: