vite + vue3 + TS项目中，AWS Amplify Failed to resolve components答案

【问题标题】：In vite + vue3 + TS project, AWS Amplify Failed to resolve componentsvite + vue3 + TS项目中，AWS Amplify Failed to resolve components
【发布时间】：2021-06-28 22:34:22
【问题描述】：

我很难让 AWS Amplify 与 Vite.js 一起工作

// First I was getting this error:
Uncaught ReferenceError: global is not defined

所以，我在 index.html 的 head 部分添加了这个 script

<script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: { DEBUG: undefined },
    version: []
  };
</script>

现在，我收到此警告/错误

[Vue warn]: Failed to resolve component: amplify-sign-out 
[Vue warn]: Failed to resolve component: amplify-authenticator

您可以在此处查看完整的日志：

【问题讨论】：

标签： javascript aws-amplify vuejs3 vite aws-amplify-vue

【解决方案1】：

我能够通过在应用根目录中创建 vue.config.js 文件并添加以下内容来修复解析组件错误：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => tag.startsWith('amplify-')
        };
        return options;
      });
  }
};

【讨论】：

这行得通，谢谢。只是给其他人的注释，我必须重新启动应用程序才能生效。

【解决方案2】：

根据AWS Amplify doc，您需要将app.config.isCustomElement = tag => tag.startsWith('amplify-'); 添加到您的main.ts 文件中。

由于您使用的是 vite，您也可以关注vite example。 vite.config.ts 文件应该是这样的

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("amplify-"),
        },
      },
    }),
  ],
});

【讨论】：