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似乎正在寻找通常由AmplifyModules别名提供的特定模块，Auth，Logger等，但是会从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)，因为我不需要做，所以我必须手动附加Amplify，方法是：Vue.prototype.$Amplify = Amplify

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

this.$Amplify.Auth.signOut()

这使我节省了250KB的捆绑包大小。

Answer 3

目前以模块化方式导入事物并不容易。

正在对此进行公开，积极的研究：https://github.com/aws-amplify/amplify-js/issues/3365

Answer 4

谢谢你，悬崖！或者，您可以像这样在main.js中配置Amplify：

import Amplify from 'aws-amplify';
import awsExports from '@/aws-exports';

Amplify.configure(awsExports);

并在使用它们的位置导入模块，因为您不一定需要全局可用它们。例如，我将所有的auth函数放在一个mixin中，在其中导入该模块：

import { Auth } from 'aws-amplify';

export default {
  methods: {
    forgotPassword(email) {
      Auth.forgotPassword(email)
         .then(...

AWS使用Vue放大模块化导入

4 个答案: