Приложение Vue.js не запускается на страницах Gitlab

Question

Я создал пользовательский интерфейс Vue.js Vuex. Он отлично работает (на моем ноутбуке). Я хочу развернуть его на страницах Gitlab.

Я использовал описанный файл здесь (за исключением того, что я обновил версию Node.js):

build site:
  image: node:10.8
  stage: build
  script:
    - npm install --progress=false
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist

unit test:
  image: node:10.8
  stage: test
  script:
    - npm install --progress=false
    - npm run unit

deploy:
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ user@server.com:/your/project/path/

Задание помечено как успешно выполненное в конвейере. Однако, когда я нажимаю на URL страницы, я получаю код ошибки 404.

Чего мне не хватает?

Answer 1

Я столкнулся с подобной проблемой, когда пытался развернуть свое приложение Vue.js на страницах Gitlab. После нескольких недель проб и ошибок я получил его на работу.

Видя вышеприведенный скрипт, вы создаете приложение, тестируете его и пытаетесь развернуть на внешнем сервере. Если вам это нужно и на страницах Gitlab, вы должны использовать задание pages.

Вот моя pages работа по развертыванию приложения vue.js на страницах Gitlab:

pages:
 image: node:latest
 stage: deploy
 script:
  - npm install --progress=false
  - npm run build
  - rm -rf public
  - mkdir public
  - cp -r dist/* public
 artifacts:
  expire_in: 1 week
  paths:
  - public
 only:
  - master

Надеюсь, это то, что вы ищете.

Answer 2

Вы можете развернуть без конвейера. Для того, чтобы это работало, вы должны сначала создать приложение для производства. Если вы использовали Vue cli, это делается с помощью команды build. ех. npm run build

Это создаст папку dist, где находятся ваши ресурсы. Это то, что вы должны вставить в свой репозиторий. Например, посмотрите на мой репозиторий. https://github.com/DanijelH/danijelh.github.io И это страница https://danijelh.github.io/