пустая страница после развертывания на gh-страницах с использованием travis - PullRequest
Новая
       46

пустая страница после развертывания на gh-страницах с использованием travis

1 голос
/ 10 января 2020

Я действительно застрял в том, как создать gh-pages в vue CLI 3.

У меня есть проект: https://github.com/aniaska4/Playlist,

Я следовал этой инструкции : travis .

Поэтому я добавляю .travis.yml: 

 language: node_js
 node_js:
 - "node"

 cache: npm

script: npm run build

deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN_Movies
local_dir: dist
on:
 branch: master

Также я добавляю deploy.sh файл: 

#!/usr/bin/env sh
# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f https://github.com/aniaska4/Playlist.git master:gh-pages

cd -

В vue.config.js Я добавляю: 

publicPath: process.env.NODE_ENV === 'production'
  ? '/Playlist/'
  : '/',

Далее я сделал диплою по travis CI, которая прошла успешно. Но когда мой gh-pages создан, у меня есть пустая страница и ошибки в консоли. https://aniaska4.github.io/Playlist/

enter image description here

В сети это выглядит так:

enter image description here

Прав ли я, что указан неверный URL-адрес запроса? Это должно быть: https://aniaska4.github.io/Playlist/ Я действительно не знаю, как исправить. Есть идеи?

1 Ответ

2 голосов
/ 14 января 2020

Как вы обнаружили, в самом развертывании нет ничего плохого, и ваши ресурсы доступны из каталога Player ваших страниц GitHub. Причина, по которой ваше vue-cli приложение не может разрешить ресурсы должным образом, заключается в том, что переменные среды, для которых нет префикса VUE_APP_, не могут быть распознаны в файлах сценариев , как указано в документации .

Учитывая вышеописанную ситуацию, process.env.NODE_ENV всегда является ложным значением, и в каждом окружении publicPath будет /. Вы должны использовать env-файлы для разных сред для определения своих переменных.

Сначала создайте файл .env.local в каталоге root вашего проекта с содержанием ниже. Эти переменные будут загружены для вашей локальной разработки. (npm run serve) 

VUE_APP_PUBLIC_PATH="/"

Затем снова создайте файл .env.production в каталоге проекта root. Они будут введены при создании производственной сборки. (npm run dist, следовательно vue-cli-service build --mode production) 

VUE_APP_PUBLIC_PATH="/Playlist/"

Наконец, измените ключ publicPath в вашем файле vue.config.js, чтобы вводить Vue переменные среды: 

publicPath: process.env.VUE_APP_PUBLIC_PATH

Разверните ваш проект еще раз, и вы увидите, что ваш publicPath изменяется с производственным путем, и ваши ресурсы будут загружены как положено.

...