Vue quaser production build "A web page is slowing down your browser"

Question

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

npm run serve

然而，在构建时，应用程序会占用大量资源并冻结浏览器。我收到消息"strong>"一个网页正在减慢你的浏览器"，而基于chrome的浏览器只需要花费大量时间。

npm run build
serve -s dist

我使用serve -s dist来测试netlify没有在本地加载的情况。我似乎不明白为什么会发生这种事。我的包.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

正如@politizatg所暗示的，这样一条消息中的错误来自一个竞赛条件，只是我无法从弹出窗口中获得清晰简洁的错误消息或方向。在我的一个组件中，我有一个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的问题。让您在浏览以前的代码实现时感到惊奇。