Unable to deploy VueJS with Gitlab Pages - vue.js

Question

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?

Answer 1

Maybe is a problem of you assets links:
Because normaly in you local host you have all js files in a public folder, where you react or vuejs project join with you .html page with only a /assets/vuejs.files.js, so for deploy you need to rebase you url
This is a documentation for vite project deploy
https://vitejs.dev/guide/static-deploy.html
where explain that you neet to rebase you url, example:
for you localhost:8000/ all files are in localhost:8000/assets/transpiled.vue.js but for deploy you url gona be diferent than https://gitlab.com/<USERNAME>/<REPO> where you base URL is '/<REPO>/'.
Necessary to do it changes, if not you build project will request you assets file into / default base url, but not exist so, will redirect to gitlab and will redirect this again to login, so for this is you problem CORS.