[英]In vite + vue3 + TS project, AWS Amplify Failed to resolve components
I am having hard time to make AWS Amplify work with Vite.js我很难让 AWS Amplify 与Vite.js 一起工作
// First I was getting this error:
Uncaught ReferenceError: global is not defined
So, I added this script
in index.html's head
section所以,我在 index.html 的
head
部分添加了这个script
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
Now, I am getting this warning/error现在,我收到此警告/错误
[Vue warn]: Failed to resolve component: amplify-sign-out
[Vue warn]: Failed to resolve component: amplify-authenticator
I was able to fix the resolve component errors by creating a vue.config.js file in the app root directory and adding the following:通过在应用程序根目录中创建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;
});
}
};
According to AWS Amplify doc , you need to add app.config.isCustomElement = tag => tag.startsWith('amplify-');
根据AWS Amplify doc ,您需要添加
app.config.isCustomElement = tag => tag.startsWith('amplify-');
to your main.ts
file.到您的
main.ts
文件。
Since you're using vite, you can also do so by following the vite example .由于您使用的是 vite,因此您也可以按照vite 示例进行操作。 The
vite.config.ts
file should be like 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-"),
},
},
}),
],
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.