在 vite + vue3 + TS 项目中，AWS Amplify 解析组件失败

Question

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

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

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

<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 

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

Answer 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;
      });
  }
};