Я выпускаю свое приложение 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 && game.scene.scenes[0].cameras.main.zoom < 2) {
game.camera.zoom += 0.1;
}
if (event.deltaY > 0 && 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)
Любая, и все, помощь приветствуется в этом вопросе:)