javascript - 你如何设置带有额外导入的 Vue 3 main.js 文件？

Question

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

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，所以很难进入它的工作。

有一篇文章在这里讨论了一些差异（寻找提供/注入）

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

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