New app not working on github pages


#1

I have a new app that I created using the CLI. I am trying to view it on my github pages in this URL: http://oren.github.io/food/

I did the following:

  1. npm run build
  2. cp -r dist/
  3. push the code to my github pages repo

but when I go to http://oren.github.io/food/ the js files failed to load. The docs (https://cli.vuejs.org/guide/deployment.html#pwa) talks about a file called vue.config.js but I don’t have it.

Here is my code: https://github.com/oren/nutrition/tree/359b1c746b1d2e4483302f661a73e531ccfdcebe

Any tips are appreciated!


#2

Your asset urls are pointing to the root directory instead of /food/.

currently: http://oren.github.io/js/app.4a5878c8.js
needs to be: http://oren.github.io/food/js/app.4a5878c8.js

So definitely a config issue. You’ll want to set the publicPath.

You can create a vue.config.js in your project root. https://cli.vuejs.org/config/#vue-config-js

So your config should look like this:

module.exports = {
  publicPath: '/food/'
}

but it sounds like on your development machine you use root as your publicPath, so you may want to config it like

publicPath: process.env.NODE_ENV === 'production'
    ? '/food/'
    : '/'

#3

Hi JamesThomson,

I’m having the same problem on my GH Pages Site. In the VuePress deployment docs, I see base rather than publicPath listed as the key for the site’s root directory.

Can you tell what I’m doing wrong here? 404 all day!

Thanks