Как настроить файл main.js для Vue 3 с дополнительным импортом?

Question

Привет, я пытаюсь сделать версию файла main.js vue 3, которая работает в vue 2

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) это будет работать (без плагина)

Не похоже, что плагин разделяет репо, поэтому сложно понять его работу.

Здесь есть статья, в которой немного говорится о различиях (ищите provide / inject)

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

Возможно, вам придется откатить собственный плагин для vue3 или продолжить использовать vue2.