Blanked page after deploy on gh-pages, using travis

Question

I really stuck in how to create a gh-pages in vue CLI 3.

I have a project: https://github.com/aniaska4/Playlist,

I followed this instruction: travis.

So I add .travis.yml :

 language: node_js
 node_js:
 - "node"

 cache: npm

script: npm run build

deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN_Movies
local_dir: dist
on:
 branch: master

Also I add deploy.sh file:

#!/usr/bin/env sh
# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f https://github.com/aniaska4/Playlist.git master:gh-pages

cd - 

In vue.config.js I add:

publicPath: process.env.NODE_ENV === 'production'
  ? '/Playlist/'
  : '/',

Next I did a deploy by travis CI, which was successful. But when my gh-pages created I have a blanked page and errors in console. https://aniaska4.github.io/Playlist/

In network it looks like this:

Am I right that there is wrong Request URL? It should be: https://aniaska4.github.io/Playlist/ I have really no idea how to fix. Any idea?

Answer 1

As you discovered, there is nothing wrong with the deployment itself, and your assets are available from the Player directory of your GitHub pages. The reason why your vue-cli application can't resolve the assets properly is, environment variables that not prefixed with VUE_APP_ can't be recognized on script files, as stated on the documentation.

Considering the above situation, process.env.NODE_ENV is always a falsey value and it causes publicPath to be / on each environment. You should use env files for different environments to define your variables.

First, create a .env.local file on your root directory of your project with the content below. These variables will be loaded for your local development. (npm run serve)

VUE_APP_PUBLIC_PATH="/"

Then create your .env.production file again in the root project directory. These will be injected when you make a production build. (npm run dist, therefore vue-cli-service build --mode production)

VUE_APP_PUBLIC_PATH="/Playlist/"

Finally, change the publicPath key in your vue.config.js file to get injected Vue environment variables:

publicPath: process.env.VUE_APP_PUBLIC_PATH

Deploy your project again, and you'll see that your publicPath is changed with the production path and your assets will be loaded as intended.