Github Pages Vue.js Project

user_18215130 0
Viewed 332

I am attempting to deploy a vuejs app to github pages. I have followed every stackoverflow post, and every tutorial I have found online. No matter what I do, the page only displays the readme file.

github repo github page

I am using the gh-pages branch.

package.json:

type here{
  "name": "eller-front-end-resume",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build",
    "predeploy": "yarn build",
    "deploy": "node scripts/gh-pages-deploy.js"
  },
  "dependencies": {
    "@vue/composition-api": "1.4.6",
    "axios": "0.26.0",
    "core-js": "^3.6.5",
    "execa": "latest",
    "lodash": "4.17.21",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.6.4",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.180",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.7",
    "@vue/cli-plugin-eslint": "~4.5.7",
    "@vue/cli-plugin-router": "~4.5.7",
    "@vue/cli-plugin-typescript": "~4.5.7",
    "@vue/cli-plugin-vuex": "~4.5.7",
    "@vue/cli-service": "~4.5.7",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.4.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

I have spent far too many hours researching and trying to host a dumb/simple app to show my grandma. Please help me.

I have followed over a dozen guides on stackoverflow and other sites (yes, even that medium article everyone points to). I am expecting to see my app running as if I was running my project locally on my machine.

vuetify.js vue.js github-pages github
1 Answers

You do not seem to have the files you build via vue in a folder that is served by GitHub Pages. Go to the repository settings in GitHub and choose "Pages". There you can switch the branch and the folder in the branch that should be served. Currently only "/" (root) or "/docs" are allowed. See the GitHub Pages Docs on this

For your use case, changing this to "/docs" and renaming your "dist" folder to "docs" after building your page / changing the output folder in your compiler should do the trick. Take note that it will take a few minutes for the new index.html to be served instead of the current Readme after changing this.

user_57983470
Related