AWS使用Vue放大模块化导入

Question

这可能是一个不是Vue特有的"JavaScript“问题。我正在尝试导入特定模块作为别名，但这似乎是不可能的。我的具体问题如下所示，尝试通过AWS Amplify和Vue使用模块化导入。下面是创建Vue实例的“非模块化”版本。

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import aws_exports from './aws-exports';

Amplify.configure(aws_exports)
Vue.use(AmplifyPlugin, AmplifyModules)

我已经这样做了：

import Amplify from '@aws-amplify/core'

但是我不知道如何将AmplifyModules的子集传递给Vue。我一直收到这个错误：

Uncaught (in promise) TypeError: Cannot read property 'Logger' of undefined
at VueComponent._callee$ (aws-amplify-vue.common.js?19b2:3257)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:288)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (aws-amplify-vue.common.js?19b2:6805)
at _next (aws-amplify-vue.common.js?19b2:6827)
at eval (aws-amplify-vue.common.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vue.common.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vue.common.js?19b2:3288)

它看起来像是Vue正在寻找特定的模块，Auth，Logger等，这些模块通常由AmplifyModules别名提供，但从aws-amplify导入所有模块，而不是模块化的。

有什么想法吗？

Answer 1

想出了这个。

我调试了模块传递问题，并使用Vue和模块化导入进行了调试。对于感兴趣的人，我将"import * as AmplifyModules“替换为：

import { Logger } from '@aws-amplify/core'
import { I18n } from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'
import { AuthClass } from '@aws-amplify/auth'

并像这样使用它：

Vue.use(AmplifyPlugin, { AuthClass, Auth, Logger, I18n })

希望这能帮助到某人

Answer 2

我花了几个小时来寻找这个问题的答案，所以我将分享对我有效的方法。

请注意，我的项目中不需要aws-amplify-vue，因此它可能与您需要的有所不同。

在我的例子中，我只需要Auth，所以在main.js中我有：

import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth' // eslint-disable-line no-unused-vars

Amplify.configure(awsconfig)

Vue.prototype.$Amplify = Amplify // <- This line is important

我没有做放大，因为我不需要它，所以我必须手动附加import { AmplifyPlugin } from 'aws-amplify-vue'; Vue.use(AmplifyPlugin)，方法是：Vue.prototype.$Amplify = Amplify

然后，在我的组件中，我将其用作：

this.$Amplify.Auth.signOut()

这为我节省了大约250KB的包大小。

Answer 3

目前，以模块化的方式导入东西并不容易。

这是开放的和积极的工作：https://github.com/aws-amplify/amplify-js/issues/3365