如何让 Amplify Authenticator、Vue2 和 Vite 协同工作？

Question

从头开始了一个 vue2 项目，它使用的是 Vite。 我想强制用户通过 Amplify 登录 Cognito。

当我运行npm run dev时，我收到以下错误：

VITE v3.1.3  ready in 405 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
✘ [ERROR] Could not read from file: /Users/thename/dev/mwt-notification-backend/example-vue/vue/dist/vue.runtime.esm.js

    node_modules/@aws-amplify/ui-vue/dist/index.js:1:496:
      1 │ ...ss, createTextVNode, Fragment, renderList, onBeforeMount, useAttrs, withModifiers, h as h$2, onUnmounted } from "vue";
        ╵                                                                                                                    ~~~~~

/Users/reikschatz/dev/mwt-notification-backend/example-vue/node_modules/esbuild/lib/main.js:1566
  let error = new Error(`${text}${summary}`);

不知道为什么会发生这种情况，但这是我的文件：

package.json

  "dependencies": {
    "@aws-amplify/core": "^4.7.5",
    "@aws-amplify/ui-vue": "^2.4.22",
    "aws-amplify": "^4.3.36",
    "buefy": "^0.9.22",
    "vue": "^2.7.10"
  },

main.js

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './App.vue';

import Amplify from '@aws-amplify/core';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Vue.use(Buefy);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

应用程序.vue

<script>
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';

export default {
  components: { Authenticator },
};
</script>

<template>
  <authenticator> ... </authenticator>
</template>

vite.config.js

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue2 from '@vitejs/plugin-vue2';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue2(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Answer 1

您在项目中使用的@aws-amplify/ui-vue版本需要 Vue v3，并且不支持您的 Vue 版本。 要使用 Vue v2，您需要使用旧版@aws-amplify/ui-components package： https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui- Vue