我想在我的新 Vue.js 项目中使用 async/await 模式。然而,在我第一次尝试后,它抛出了一个错误:
<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-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue 警告]:
创建钩子时出错:“ReferenceError:regeneratorRuntime 不是
定义”
found in
---> 在 src/views/Test.vue
在 src/containers/TheContainer.vue
在 src/App.vue
警告@ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629
webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896
ReferenceError:未定义 regeneratorRuntime
在 VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist /cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&type=script&lang=js&:25)
在 invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862)
在 callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216)
在 VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001)
在新的 VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147)
在 createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289)
在初始化时(webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120)
合并时(webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307)
在 createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973)
在 createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5920)
经过一番研究,我找到了一个解决方案,建议安装以下两个 babel 插件:
- @babel/polyfill
- @babel/插件变换再生器
我已经通过 npm 安装了它们并将它们添加到我的 babel.config.js 文件中:
module.exports = {
presets: [
['@babel/preset-env']
],
plugins: [
['@babel/polyfill'],
['@babel/plugin-transform-regenerator']
]
}
之后,我的页面立即崩溃,出现一个充满 SocketException 和 HttpRequestException 的非特定错误页面:
无法将请求代理到http://localhost:8081/mypage http://localhost:8081/mypage, 因为
对代理目标的请求失败。检查代理目标
服务器正在运行并接受请求http://本地主机:8081/ http://localhost:8081/。
底层异常消息是“Es konnte keine Verbindung”
网络连接、计算机连接
verweigerte。'。检查 InnerException 了解更多详细信息。
这两个 babel 插件是否是正确的方向?如果是,我该如何解决这个问题?
我还发现这个相关帖子 https://stackoverflow.com/questions/46389267/using-async-await-with-webpack-simple-configuration-throwing-error-regeneratorr,但我没有 webpack 配置文件。这是我的 vue.config.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"
}
}