Блог

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

Шаги для воспроизведения

Как я упоминал ранее, проблема присутствует только в рабочем режиме. Поэтому я сделал все возможное, чтобы воспроизвести проблему, просто выпустив приложение в Netlify для воспроизведения. Вот шаги:

• Посетите приложение на netlify здесь:https://grandquest.netlify.com
• Прокрутите вниз до формы «Регистрация» и создайте поддельную учетную запись, чтобы проверить ошибку
• Войдите в систему, используя эти учетные данные на странице входа
• Откройте консоль
• Посетите мир и нажмите кнопку с надписью «Исследовать Монокай».

Выполнение этого должно привести вас к ошибочному маршруту / компоненту (grandquest.netlify.com/map )

Подробности

• Приложение отлично работает в режиме разработки, однако (на что я дам ссылку) при запуске в рабочем режиме приложение выдает ошибку: Ошибка типа: e не определено (только для Mozilla Firefox, AFAIK), когда я монтирую определенный маршрут.

• Во-вторых, в vue-cli журналах сборки я вижу различные предупреждения, касающиеся ограничений размера файла. Вот предупреждения из журналов сборки:

     warning  

    asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets: 
    img/gold-frame.536f6ce1.png (415 KiB)
    media/combat-fail.f73de150.mp3 (317 KiB)
    img/monokai-village.84e00e29.png (1.25 MiB)
    img/combat.835c3bee.png (1.04 MiB)
    img/combat-shop.138daeea.png (1.56 MiB)
    img/potions-shop.dea509b2.png (2.07 MiB)
    media/fields-music1.bd10f1d6.mp3 (2.46 MiB)
    img/village-gate.f8c4cfd2.png (3.52 MiB)
    js/chunk-vendors.6c22f97f.js (1.71 MiB)

    warning  

    entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
    Entrypoints:
    app (1.95 MiB)
    js/chunk-vendors.6c22f97f.js
    css/app.fa9c625b.css
    js/app.9440af5a.js


    warning  

    webpack performance recommendations: 
    You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
    For more info visit https://webpack.js.org/guides/code-splitting/

    DONE  Build complete. The dist directory is ready to be deployed.
    INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

    ✨ Done in 122.97s.

  

Эти две детали заставили меня поверить, что проблема вызвана ошибкой объединения

—

Я попытался найти имя любой переменной e в своем коде, думая, что, возможно, это было событие, но в моем коде таких переменных нет. Похоже, что это просто переменная, которая «связана» vue.

Из-за природы этой ошибки (я не уверен, что за переменная e присутствует в коде, потому что она запутана), я сделал все возможное, чтобы обобщить соответствующий код для компонента Map. Я бы также не возражал предоставить общий доступ ко всем файлам, если это могло бы помочь, однако e переменная не найдена.

@/views/Map.vue

 <template>
<div>
    <!-- LOADING SCREEN -->
    <div v-if="!gameInterface.gameInitialized" id="loading-screen">
      <img src="@/assets/img.png" v-on:click="$router.push(`/world`)">
      <div class="tip">Fun fact</div>
      <div class="loading-text">Loading assets</div>
    </div>
    <!-- MAP CONTAINER -->
    <div class="map">
      <button class="exit-button" v-on:click="() => $router.replace({ name: 'world' })">
    EXIT
      </button>
      <!-- CANVAS PARENT -->
      <div
        id="canvas-parent"
        v-on:mousemove="gameInterface.mouseMonitor"
        v-on:mouseleave="gameInterface.pointer.hovering = false"
        v-on:resize="resizeMonitor"
      />
      <!-- RENDER THE SHOP -->
      <Shop v-if="gameInterface.chosenShop"/>
    </div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { State, Mutation } from 'vuex-class'
// typescript types
import { User } from '@/types';
// vue components
import Shop from '@/components/Shop.vue';
// the game controller
import gameInterface from '@/game/places/map.ts';

@Component({
  components: { Shop }
})
export default class Map extends Vue {
  @State public user!: User;

  public gameInterface = gameInterface();

  public mounted() {
    if (!this.user.authenticated) {
      return this.$router.replace({ name: 'world' });
    }
    this.gameInterface.launch();
    document.addEventListener('wheel', this.gameInterface.scrollMonitor, true);
  }
  public destroyed() {
    document.removeEventListener('wheel', this.gameInterface.scrollMonitor, true);
    this.gameInterface.destroyGame();
  }
}
  

@/game/places/map.ts

 export default () => {
let game: any = null;

let global = {
  tooltip: {},
  chosenShop: null,
  gameInitialized: false,
  pointer: { x: 0, y: 0, hovering: false },
  launch() {
    if (!game) {
      // here a phaser game is started
      game = new Phaser.Game({
        // ...config here
        created() {
          global.gameInitialized = true;
        },
      });
    }
  },
  destroyGame() {
    if (game) {
      game.destroy();
    }
  },
  mouseMonitor(event) {
    if (!global.gameInitialized) {
      return;
    }

    global.pointer = {
      x: event.clientX,
      y: event.clientY,
      hovering: true,
    };
  },
  scrollMonitor(event) {
    if (!game) {
      return;
    }
    if (event.deltaY < 0 amp;amp; game.scene.scenes[0].cameras.main.zoom < 2) {
      game.camera.zoom  = 0.1;
    }
    if (event.deltaY > 0 amp;amp; game.scene.scenes[0].cameras.main.zoom > 1.15) {
      game.camera.zoom -= 0.1;
    }
  },
  exitShop() {
    if (!game) {
      return;
    }
    global.chosenShop = null;
    game.resume();
  }
};

return global;
};
  

Ожидаемый результат

Некоторое время, пока загружаются ресурсы, вы должны видеть экран загрузки, а затем на экране должна появиться карта. Вы должны иметь возможность с помощью курсора перемещаться по этой карте вверх и вниз, а также нажимать на различные магазины.

Фактический результат

Похоже, что экран загружается бесконечно, потому что произошла ошибка, которая остановила приложение. Теперь ошибка должна появиться в консоли с надписью Ошибка типа: e не определено (в Firefox)

Приветствуется любая помощь в решении этой проблемы 🙂

Существует ли эта функция?

 v-on:resize="resizeMonitor"
  

Я нигде этого не вижу. Я думаю, вы получите ошибку такого типа, если функция не существует