在Vue中使用异步/等待模式。js

Question

我想在我的新Vue.js项目中使用async/wait模式。但是，在我第一次尝试后，它抛出了一个错误：

<template>
    <div>
        <table>
            <tr>
                <th>Test</th>
            </tr>
            <tr v-for="(value, name) in pickingList">
                <td>{{value}}</td>
            </tr>
        </table>
        s
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                pickingList: null,
                pickingZone: '1006'
            }
        },
        async created() {
            await this.getPickingList();
        },
        methods: {
            async getPickingList() {
                this.pickingZone = await this.$http.get("Picking/PickingZoneLists/" + this.pickingZone);
            }
        }
    }
</script>

这会引发以下错误：

WebPack内部：///./node_modules/vue/dist/vue.esm.js:629[Vue警告]：创建钩子时出错："引用错误：重新生成运行时未定义"

发现于

---

经过一些研究，我找到了一个解决方案，建议安装以下两个babel插件：

• @babel/polyfill

我通过npm安装它们并将它们添加到我的babel.config.js文件中：

module.exports = {
    presets: [
        ['@babel/preset-env']
    ],
    plugins: [
        ['@babel/polyfill'],
        ['@babel/plugin-transform-regenerator']
    ]
}

之后，我的页面立即崩溃，出现一个充满SocketExceptions和HttpRequest estExceptions的非特定错误页面：

未能将请求代理给http://localhost:8081/mypage，因为对代理目标的请求失败。检查代理目标服务器是否正在运行并接受对的请求http://localhost:8081/.潜在的异常消息是“Es konnte keine Verbindung hergestellt werden，da der Zielcomputer die Verbindung verweigerte”。有关更多详细信息，请查看InnerException。

这两个巴别塔插件都是正确的吗？如果是，我如何解决问题？

我也找到了这篇相关文章，但我没有网页配置文件。这是我的vue。配置。js:

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  configureWebpack: {
    //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
    resolve: {
       symlinks: false
    }
  }
}

最后，我的package.json：

{
  "name": "@coreui/coreui-free-vue-admin-template",
  "version": "3.0.0-beta.3",
  "description": "Open Source Bootstrap Admin Template",
  "author": {
    "name": "CoreUI",
    "url": "https://coreui.io",
    "github": "https://github.com/coreui",
    "twitter": "https://twitter.com/core_ui"
  },
  "contributors": [
    {
      "name": "CoreUI Team",
      "url": "https://github.com/orgs/coreui/people"
    }
  ],
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "clearCache": "jest --clearCache",
    "release": "npm-run-all clearCache lint build test:unit test:e2e"
  },
  "dependencies": {
    "@coreui/coreui": "^3.0.0-beta.4",
    "@coreui/icons": "^1.0.0",
    "@coreui/utils": "^1.0.0",
    "@coreui/vue": "^3.0.0-beta.4",
    "@coreui/vue-chartjs": "^1.0.2",
    "axios": "^0.19.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-regenerator": "^7.8.3",
    "@babel/polyfill": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-e2e-nightwatch": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-plugin-unit-jest": "^4.1.1",
    "@vue/cli-service": "^4.1.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "chromedriver": "^79.0.0",
    "core-js": "^3.4.8",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.0.1",
    "node-sass": "^4.13.0",
    "npm-run-all": "^4.1.5",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ],
  "engines": {
    "node": ">= 8.10.x",
    "npm": ">= 5.6.0"
  }
}

Answer 1

我找到了一篇关于这个主题的相对较新的媒体帖子@babel/polyfill已被弃用。您需要安装@babel/runtime和@babel/plugin transform runtime，然后对您的babel进行一些更改。配置。js:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        // "absoluteRuntime": false,
        "corejs": false,
        // "helpers": true,
        "regenerator": true,
        // "useESModules": false
      }
    ]
  ]
}

来源文章：https://medium.com/@kishan020696/react-16-with-webpack-4-and-babel-7-part-2-edb34d78f695