Question

我正在将我的Vue应用程序发布到生产环境中，但是一个特定的组件引发了一条无法跟踪的神秘错误消息，因为所有项目文件都已捆绑在一起，并且变量名已更改。此错误也只能在生产模式（构建）中重现，这使我相信这是与捆绑程序本身有关的问题。

复制步骤

正如我之前提到的，该问题仅在生产模式下存在。因此，我已尽力通过简单地在Netlify上发布要复制的应用程序来重现该问题。步骤如下：

在netlify上访问应用程序：https://grandquest.netlify.com
向下滚动到“注册”表单并创建一个伪造的帐户来测试错误
在登录页面上使用这些凭据登录
打开控制台
访问world，然后点击显示“探索Monokai”的按钮

执行此操作会将您带到错误的路线/组件（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被混淆，所以我不确定代码中的变量e是什么），我已尽力总结了Map组件的相关代码。如果有帮助的话，我也不介意共享整个文件，但是找不到<template> <div>  <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>  <div class="map"> <button class="exit-button" v-on:click="() => $router.replace({ name: 'world' })"> EXIT </button>  <div id="canvas-parent" v-on:mousemove="gameInterface.mouseMonitor" v-on:mouseleave="gameInterface.pointer.hovering = false" v-on:resize="resizeMonitor" />  <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(); } }变量。

@ / views / Map.vue

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;
};

@ / game / places / map.ts

services.AddDbContext<AuthDbContext>(options => options.UseSqlServer
      (Configuration.GetConnectionString("AuthAPI"))
 )

预期产量

在加载资产的同时，您应该会看到加载屏幕一段时间，然后地图上应该会出现。您应该可以使用光标上下浏览此地图，以及单击各个商店。

实际输出

该屏幕似乎正在无限期加载，因为发生了导致该应用停止的错误。现在，该错误应出现在控制台中，显示“类型错误：e未定义（在Firefox上）

任何人和所有人都可以帮助解决此问题：）

Answer 1

此功能存在吗？

v-on:resize="resizeMonitor"

我什么地方都看不到。我认为如果该函数不存在，您会收到此类错误

生产中的神秘错误：“类型错误：e未定义”

1 个答案: