问题描述
我很难让 AWS Amplify 与 Vite.js 一起工作
// First I was getting this error:
Uncaught ReferenceError: global is not defined
所以,我在 index.html 的 script
部分添加了这个 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
解决方法
我能够通过在应用根目录中创建一个 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;
});
}
};
,
根据 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-"),},}),],});