如何让Amplify Authenticator、Vue2与Vite协同工作并解决报错？

问题根源 #

报错显示@aws-amplify/ui-vue试图导入vue/dist/vue.runtime.esm.js，但Vue 2.7的ES模块入口路径已变更，且当前Vite配置未正确映射Vue的模块解析路径，导致esbuild无法定位目标文件。此外，@aws-amplify/ui-vue v2版本在Vue2环境下需要适配组合式API的导入逻辑。

解决方案 #

1. 配置Vite的Vue解析别名 #

修改vite.config.js，在resolve.alias中添加Vue的别名，指定正确的Vue2.7入口文件：

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

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

export default defineConfig({
  plugins: [
    vue2(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 指定Vue2.7的ES模块入口
      'vue': 'vue/dist/vue.esm-browser.js'
    },
  },
});

2. 同步Amplify依赖版本 #

当前依赖版本存在微小兼容性问题，可升级到以下兼容版本组合，执行npm install更新：

{
  "dependencies": {
    "@aws-amplify/core": "^4.9.3",
    "@aws-amplify/ui-vue": "^2.4.25",
    "aws-amplify": "^4.3.44",
    "buefy": "^0.9.22",
    "vue": "^2.7.14"
  }
}

3. 优化Amplify导入逻辑（可选） #

将main.js中的Amplify导入改为统一从aws-amplify导入，避免核心模块重复初始化：

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

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

Amplify.configure(awsconfig);

Vue.use(Buefy);

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

4. 清理缓存重启服务 #

执行以下命令清理缓存后重启开发服务：

rm -rf node_modules package-lock.json
npm install
npm run dev

验证 #

重启服务后，若报错消失且Authenticator组件正常渲染，说明配置生效，可继续开发强制登录逻辑。

内容的提问来源于stack exchange，提问作者reikje