Unable to deploy VueJS with Gitlab Pages

Hello there,

I have used Gitlab pages in the past for React deployment and they work well except for VueJS. After following the example here, I’m still unable to generate a website link for my Gitlab page even after GitLab CI pipeline was successful. Can anyone help with this?

This is what the .gitlab-ci.yml looks like:

# .gitlab-ci.yml file to be placed in the root of your repository

pages: # the job must be named pages
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages hooks on the public folder
    - mv dist public # rename the dist folder (result of npm run build)
  artifacts:
    paths:
      - public # artifact path must be /public for GitLab Pages to pick it up
  only:
    - master

This is what the vue.config.js looks like:

// vue.config.js file to be place in the root of your repository
// make sure you update `yourProjectName` with the name of your GitLab project

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/'
}

After committing and pushing my changes, the GitLab CI pipeline was changed from running to successful. I was expecting to see my website link on Settings > Pages. I clicked on it, but I didn’t see it. What could be wrong?