vue js gitlab 页面部署在子目录上

问题描述

我正在 GitLab 页面上部署 Vue js（在子目录中，例如：/front-end/admin-dashboard），但是当我打开 URL 时，我收到了资产 404 错误。

这是我的 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

这是vue.config.js：

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

注意：我的路由器模式是“历史”。

这是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);
    },});
}

解决方法

如果您的项目位于诸如 mygroup.gitlab.io/myusername/myprojectname

之类的组中

您可以将此代码添加到 vue.config.js 文件中：

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

如果这是正确的答案，请接受或评论:) 谢谢