我正在使用具有以下配置的webpack-simple模板:
package.json
{
"name": "vue-wp-simple",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "v",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.7.0",
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"style-loader": "^0.18.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
.babelrc
{
"presets": [
["env", { "modules": false }],
]
}
以下是我在组件中使用async / await的方法
async mounted(){
//this.$store.dispatch('loadImg', this.details.imgUrl).then((img) => {
//this.drawImage(img);
//});
var result = await this.loadImg();
console.log(result);
},
methods:{
async loadImg(){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('yeah async await works!');
}, 2000);
});
},
}
但是,当我运行该应用程序时,出现错误: ReferenceError:regeneratorRuntime未定义 ,甚至该组件也未显示
为了使用await / async,您将需要安装几个Babel依赖项。这适用于Vuejs项目-
安装后,您需要修改.babelrc文件以使用插件,如下所示-
以及您的webpack.config.js文件以如下方式使用再生器-
根据您的项目结构和文件名等进行必要的更改。