search

jeneser / vue-cli-ghpages

Made for vue-cli users. Publish to any gh-pages branch on GitHub. The Single-Page App Hack for GitHub Pages.
https://www.npmjs.com/package/vue-cli-ghpages
MIT License
25 stars 1 forks source link

All assets are fail to load #3

Open halton opened 6 years ago

halton commented 6 years ago

Environment:

Steps:

  1. vue create vue-test
  2. Push the code to a github repo, like https://github.com/halton/vue-test
  3. vue-cli-ghpages
  4. Browse the ghpages https://halton.github.io/vue-test/

Expected result:

image

coderpradp commented 6 years ago

FAQ You need to setup relative path during build. Follow these steps:

  1. Open up /config/index.js file
  2. Change assetsPublicPath: '/' to assetsPublicPath: './'
  3. Save, build and deploy
halton commented 6 years ago

Unfortunately, I failed in both cases:

  1. Fail to find the config/index.js file on a clean new created VUE repo, https://github.com/halton/vue-test
  2. I found config/index.js in another old repo, but your FAQ does not help in advance.
coderpradp commented 6 years ago

Well the config/index.js is only available in some template of vue-cli. You could change the path yourself in index.html file to reference correct assets.

halton commented 6 years ago

Still very confused, could you go to the repo https://github.com/halton/vue-test and ponit me which file should change? This repo is zero change after crating with vue create.

coderpradp commented 6 years ago

Okay you can create vue.config.js file in root of your project. Then insert following line:

module.exports = {
  baseUrl: '/vue-test/',
}

From Official vue-cli docs:

Project deployment base By default we assume your app will be deployed at the root of a domain, e.g. https://www.my-app.com/ If your app is deployed at a sub-path, you will need to specify that sub-path here. For example, if your app is deployed at https://www.foobar.com/my-app/ then change this to '/my-app/'