我正在使用带有以下配置的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 甚至组件也没有显示
答案 0 :(得分:20)
要使用 await / async ,您需要安装几个Babel依赖项。这适用于Vuejs项目 -
npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator
安装完成后,您需要修改 .babelrc 文件以使用该插件,如下所示 -
{
"plugins": ["transform-regenerator"]
}
以及 webpack.config.js 文件以使用再生器,如下所示 -
require("babel-polyfill");
module.exports = {
entry: ["babel-polyfill", "./app.js"]
};
根据您的项目结构和文件名等进行必要的更改。
答案 1 :(得分:3)
使用async&等待,你应该为你的babel配置添加2个插件: https://babeljs.io/docs/plugins/transform-async-to-generator/和https://babeljs.io/docs/plugins/syntax-async-functions/
答案 2 :(得分:1)
我只是通过以下方式获得了异步功能:
1)使用VUE CLI或终端安装以下dev依赖项
终端示例:
npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator
2)然后在我的main.js文件(或创建vue对象的文件(新的Vue)中)中添加了以下导入
import '@babel/polyfill'
答案 3 :(得分:0)
Sohail的解决方案有效。我有一个异步函数,最终抛出了错误...
可以肯定的是,我使用了vue-cli来构建我的项目。因此,我有一个vue.config.js,它在编译时会将内容注入到webpack.config中。
(有关信息,here)
因此,在vue.config.js中,我具有以下内容:
module.exports = {
configureWebpack: {
entry: ['@babel/polyfill', './src/main.ts'],
plugins: [
]
},
chainWebpack: config => {
config.resolve.alias.set('@image', path.resolve(__dirname, 'public/img'));
config.resolve.alias.set('@dev', path.resolve(__dirname, 'dev-server'));
},
}
然后,在babel.config.js中,我有以下内容:
module.exports = {
presets: [
'@babel/env',
],
plugins: [
"transform-regenerator"
],
}
我希望这会有所帮助!