@Bloon

Деплой Vue.js на GitHub выдает ошибку?

Использую ручную публикацию как в посте:
https://cli.vuejs.org/ru/guide/deployment.html#git...

При работе в версии разработки все работает исправно. После запуска билда и работе с директорией dist, выдает ошибку runtime-core.esm-bundler.js. Cannot read properties of undefined. Не может найти переменную.

Репозиторий: https://diamondniam.github.io/coin-flip/
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
Неплохо бы, чтоб в следующих своих вопросах ты прикладывал собственно КОД и тест ошибки.
Я смог выковырять причину из собранного бандла, но тебе просто повезло, куда чаще мне(и 99% людей) так делать лень.

Теперь, собственно, проблема:
у тебя в коде есть несколько мест где используется подобная обработка событий:
@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, как в обычных событиях js.
2. Не следует декларировать функции внутри шаблона. Шаблон сам по себе должен содержать минимальное количество кода. Да, vue позволяет использовать любой js в шаблоне, однако чаще чем следовало бы это приводит к плохому коду. В шаблонах следует использовать маленькие кусочки кода, условно: @side-emit="someValue = $event ? 1 : 2", а что-то сложнее просто выносить в метод компонента\composition функцию: @side-emit="onSlideEmit".
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы