解决vue ES7语法下报ReferenceError: regeneratorRuntime is not defined的问题

报错内容

[Vue warn]: Error in v-on handler: "ReferenceError: regeneratorRuntime is not defined"

found in

---> <ElButton> at packages/button/src/button.vue
       <ElFormItem> at packages/form/src/form-item.vue
         <ElForm> at packages/form/src/form.vue
           <Login> at src/components/Login.vue
             <App> at src/App.vue
               <Root>
warn @ vue.esm.js?915d:628
logError @ vue.esm.js?915d:1893
globalHandleError @ vue.esm.js?915d:1888
handleError @ vue.esm.js?915d:1848
invokeWithErrorHandling @ vue.esm.js?915d:1871
invoker @ vue.esm.js?915d:2188
invokeWithErrorHandling @ vue.esm.js?915d:1863
Vue.$emit @ vue.esm.js?915d:3897
handleClick @ button.js?f2e8:312
invokeWithErrorHandling @ vue.esm.js?915d:1863
invoker @ vue.esm.js?915d:2188
original._wrapper @ vue.esm.js?915d:7565
vue.esm.js?915d:1897 ReferenceError: regeneratorRuntime is not defined
    at eval (Login.vue?1e79:67)
    at VueComponent.login (Login.vue?1e79:67)
    at invokeWithErrorHandling (vue.esm.js?915d:1863)
    at VueComponent.invoker (vue.esm.js?915d:2188)
    at invokeWithErrorHandling (vue.esm.js?915d:1863)
    at VueComponent.Vue.$emit (vue.esm.js?915d:3897)
    at VueComponent.handleClick (button.js?f2e8:312)
    at invokeWithErrorHandling (vue.esm.js?915d:1863)
    at HTMLButtonElement.invoker (vue.esm.js?915d:2188)
    at HTMLButtonElement.original._wrapper (vue.esm.js?915d:7565)
image.png

问题原因:

项目中请求数据使用了异步函数,并用async 、await关键字修饰。async 、await 是es7出来的。项目运行在浏览器中如果不支持es7的情况下,那么就会报如上所示的错误。

解决办法:安装插件实现转换语法,将es7转换es5。

  • 步骤一:安装babel-plugin-transform-runtime
    sudo cnpm install babel-plugin-transform-runtime --save

  • 步骤二:.babelrc文件中增加"transform-runtime"

image.png
  • 步骤三:重新运行即可sudo cnpm run dev
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。