如何使用额外的导入设置Vue 3 main.js文件？

Question

嗨，我正在尝试做在vue 2中工作的main.js文件的vue 3版本

vue 2

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import awsmobile from "./aws-exports";

Amplify.configure(awsmobile);
Vue.use(AmplifyPlugin, AmplifyModules);

Vue.config.productionTip = false;
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

vue 3最佳猜测

import { createApp } from 'vue';
import App from './App.vue'

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'

const app = createApp(App)

Amplify.configure(awsconfig)

app.use(AmplifyPlugin, AmplifyModules)

app.mount('#app')

在没有额外导入的情况下工作，然后在我添加它们时只显示一个白屏

Answer 1

我认为原因是vue3中的插件结构发生了变化

我怀疑如果你注释掉这一行：app.use(AmplifyPlugin, AmplifyModules)，它会工作(没有插件)

这个插件看起来不像共享一个repo，所以很难了解它的工作原理。

这里有一篇文章谈到了一些不同之处(查找provide/inject)

https://medium.com/better-programming/designing-vue3-plugins-using-provide-and-inject-47b586d9ce4

您可能需要使用自己的vue3插件，或者继续使用vue2。