Question

我正在使用 Vue 和 Quaser 构建一个 Web 应用程序。我的开发环境运行良好，一切都按预期加载。我像其他人一样为开发服务：

npm run serve

但是，在构建时，应用程序会占用大量资源并冻结浏览器。我在 Firefox 上收到消息“网页正在降低您的浏览器的速度”，而基于 chrome 的浏览器只需要很长时间。

npm run build
serve -s dist

我使用 serve -s dist 来测试 netlify 没有在本地加载。我似乎无法理解为什么会发生这种情况。我的 package.json 如下所示：

{
  "name": "friendly-chainsaw-sass-kit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "apexcharts": "^3.26.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.6.0",
    "vue-css-donut-chart": "^1.3.0",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/composition-api": "^1.0.0-rc.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-cli-plugin-quasar": "~3.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

我可能做错了什么吗？

Answer 1

正如@larizzatg 所暗示的那样，此类消息的错误来自竞争条件，只是没有我可以从弹出窗口中获得的清晰简洁的错误消息或方向。在我的一个组件中，我有一个 for 循环，我在其中进行切片。

<div v-for="task in allTasks.splice(0,3)" :key="task.name">

上面会循环遍历任务数组，只是不是全部，准确地说是 3 个项目。它在开发中运行良好。但是，为了避免错误。

<div v-for="task in topTasks" :key="task.name">

其中 topTasks 来自 computed 属性。这应该在开发阶段失败，而不是希望它起作用。我已经对基于 Angular 的应用程序做了同样的实现。我没想到这会是 Vue 的问题。让您仔细检查之前的代码实现。

Vue quaser 生产版本“网页正在减慢您的浏览器的速度”

1 个答案: