Using vue-cli (vuejs) with Github Pages
Recently, I have found some issues with the Vue-CLI when I tried to use it with Github Pages (an amazing way to set up a quick prototype, I'll prob write more about it in another blog).
Problem 1: Builds to
/dist folder instead Github prefered
This turns out to be super easy to fix, simply open
/config/index.js file and find the following lines.
... index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), ...
Then change them to the following:
... index: path.resolve(__dirname, '../docs/index.html'), assetsRoot: path.resolve(__dirname, '../docs'), ...
Problem 2: File path is broken and shows blank page on Github Pages
After fixing the first problem, pushing the changes to master. Then load up the relative URL, then I realised there is still nothing being displayed. Here are the console errors:
Looking at the build info in the terminal, it also says the build directory should be served over an HTTP server.
After looking around at the config more, I also found a relatively easy fix. Again open up
/config/index.js file and find the following line.
... assetsPublicPath: '/', ...
Now just change the absolute path to a relative path, then voila, everything should work on Github Pages as expected.
... assetsPublicPath: './', ...
Also feel free to remove or comment out the warning in the terminal show above, since we have now fixed the problem. Within
build/build.js, the following snippet is responsible for showing the warning.
console.log( ' Tip:\n' + ' Built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )