При попытке развернуть приложение Vue.js на GitHub возникает ошибка.

  • 17 августа 2023 г. 18:56
Ответы на вопрос 2
Ошибку "Cannot read properties of undefined" в файле `runtime-core.esm-bundler.js` обычно вызывают проблемы с инициализацией Vue.js приложения или неправильным использованием API Vue.js. Возможно, желаемый объект или свойство не определены, что приводит к возникновению этой ошибки.

В вашем случае, проблема может быть вызвана неправильным развертыванием приложения. Убедитесь, что вы выполнили следующие шаги:

1. Убедитесь, что у вас установлена последняя версия Vue CLI. Если нет, обновите его, выполнив следующую команду: `npm install -g @vue/cli`.

2. После установки Vue CLI, перейдите в папку вашего проекта и выполните команду `npm run build` для создания продакшн версии приложения. Убедитесь, что эта команда выполнилась успешно и результат сборки сохранен в папке `dist`.

3. Убедитесь, что в корневом каталоге вашего проекта есть файл `.nojekyll`. Если нет, создайте его с помощью команды `touch .nojekyll`.

4. Создайте отдельную ветку в вашем репозитории GitHub для развёртывания вашего приложения. Например, назовите ее `gh-pages`.

5. Перейдите в папку `dist` и скопируйте ее содержимое в корневую папку вашей ветки `gh-pages`.

6. Отправьте изменения в ваш репозиторий GitHub, переключив контекст на вашу новую ветку `gh-pages`.

7. Подождите, пока GitHub обработает изменения и опубликует ваше приложение. После обработки, ваше приложение будет доступно по адресу https://your-github-username.github.io/your-repo-name/. В вашем случае, по адресу https://diamondniam.github.io/coin-flip/.

Если проблема остается, попробуйте выполнить сборку и развертывание приложения на локальном сервере, чтобы проверить, есть ли какие-либо другие ошибки или предупреждения. Выполните команду `npm run serve`, чтобы запустить локальный сервер разработки и откройте приложение в браузере по адресу, указанному после выполнения команды.

Если никакие из этих шагов не помогли решить проблему, попытайтесь добавить больше информации о проблеме, конкретный код, вызывающий ошибку, и любые другие ошибки или предупреждения, которые вы получаете. Это поможет нам лучше понять проблему и предоставить более конкретное решение.
Неплохо бы, если в следующих вопросах ты приложишь код и сообщение об ошибке. Я смогу выявить причину ошибки из кода и сообщения. Тебе просто повезло, что я смог это сделать из собранного бандла, потому что обычно мне (и другим людям) лень это делать. 

Теперь о проблеме. В твоем коде есть несколько мест, где используется обработка событий вида:

@side-emit="(side, id) => { 
    this.players[id].side = side; 
    ...
}"

Ошибкой здесь является явное использование ключевого слова "this". Внутри шаблона оно не нужно, так как оно будет раскрыто автоматически или, в случае с <script setup>, вообще не используется. Запомни, что в шаблонах не нужно использовать "this". 

Вот как работать правильно:

@side-emit="(side, id) => { 
    players[id].side = side; 
    ...
}"

Почему это сработало в режиме разработки? Потому что во время разработки используется упрощенный режим сборки, который случайным образом сделал доступным правильное использование "this" в данном конкретном случае. Просто совпало. 

Также относительно кода: в данном случае использованы два антипаттерна, которые лучше вообще не использовать:

1. События компонента должны передавать только одно значение. В Vue можно эмитировать и принимать сколько угодно значений, но это чаще всего приводит к плохому коду. Следует придерживаться правила: одно событие - один payload, как в обычных событиях JavaScript.

2. Не следует объявлять функции внутри шаблона. Шаблон должен содержать минимальное количество кода. В Vue можно использовать любой JavaScript в шаблоне, но это чаще всего приводит к плохому коду. В шаблоне следует использовать небольшие кусочки кода, например:

@side-emit="someValue = $event ? 1 : 2"

А что-то более сложное лучше вынести в метод компонента или использовать функцию композиции. Например:

@side-emit="onSlideEmit"
Похожие вопросы