Я хочу использовать шаблон async / await с моим новым Vue. js проектом. Однако после моей первой попытки выдается ошибка:
<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 warn]: ошибка в созданном хуке: «ReferenceError: регенератор не определен» *
найдено в
---> в src / views / Test. vue в src / Containers / TheContainer. vue в src / App. vue warn @ webpack-internal: ///./node_modules/vue/dist/vue.esm . js: 629 webpack-internal: ///./node_modules/vue/dist/vue.esm.js: 1896 ReferenceError: регенераторRuntime не определен в 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-i nternal: ///./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) в init (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 / plugin-transform-Регенератор
Я установил их через npm и добавил их в свой файл babel.config. js:
module.exports = {
presets: [
['@babel/preset-env']
],
plugins: [
['@babel/polyfill'],
['@babel/plugin-transform-regenerator']
]
}
После что моя страница сразу падает с ошибкой unspecifi c, заполненной страницами SocketExceptions и HttpRequestExceptions:
Не удалось перенаправить запрос на http://localhost: 8081 / mypage , поскольку запрос к цели прокси не выполнен. Убедитесь, что целевой прокси-сервер работает и принимает запросы к http://localhost: 8081 / . Основным сообщением об исключении было «Es konnte keine Verbindung hergestellt werden, da der Zielcomputer d ie Verbindung verweigerte." ? Если да, как я могу решить проблему?
Я также нашел этот связанный пост , но у меня нет файла конфигурации 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
}
}
}
Наконец, вот мой пакет. 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"
}
}