0

I'm deploying Vue js on GitLab pages (on subdirectory ex: /front-end/admin-dashboard), but when I open the URL I got a 404 error for assets.

this is my GitLab ci:

pages: # the job must be named pages
  image: node:latest
  stage: deploy
  script:
    - npm install --force
    - 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)
    # optionally, you can activate gzip support with the following line:
    - find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec gzip -f -k {} \;
  artifacts:
    paths:
      - public # artifact path must be /public for GitLab Pages to pick it up
  only:
    - master

and this is vue.config.js:


module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? `/${process.env.CI_PROJECT_NAME}/` : '/',
  transpileDependencies: ['vuetify'],
};

enter image description here

Note: my router mode is 'history'.

and this is serviceWorker.js:

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n',
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}
ShaSha
  • 589
  • 3
  • 9
  • 24
  • If you were to run this locally or deploy it to a remote web server, does it work there? Meaning, is it just a vue issue, just a Gitlab Pages issue, or both? Figuring that out will help solve the issue quicker. – Adam Marshall Mar 04 '21 at 15:16

1 Answers1

0

If your project is located in group such as mygroup.gitlab.io/myusername/myprojectname

You can add this code to vue.config.js file:

module.exports = {
    publicPath: '/myusername/myprojectname/'
}

If this is correct answer, please accept or comment :) Thanks

Guvanch
  • 838
  • 7
  • 10