如何按需创建Vue3+composition API应用程序

Question

我计划将两个Vue2应用程序重写为Vue3+composition API。但问题是，它们不是立即初始化的，而是在一些用户交互之后才初始化的。

在Vue2中，我可以：

import MyApp from './MyVue2App.vue';
import Vue from 'vue';

export default { Vue: Vue, MyApp: MyApp }

然后我可以通过requirejs获得这些导出，这样应用程序就可以完全按需提供。

不过，我无法对Vue3做类似的事情。最丑陋的解决方案是将createApp和MyApp.vue存储在window中(我非常希望避免使用全局变量)，例如：

// main.ts
import { createApp } from 'vue';
import App from './MyVue3App.vue;

// export default { createApp, App } <- doesn't work, can't import from the bundle
window.MyVue3App = App
window.createApp = createApp

// index.html
<script src="vendor.js"></script>
<script src="app.js"></script>

<div id="foo"></div>

<button onclick="window.createApp(window.MyVue3App).mount('#foo')">
  Mount APP
</button>

有人知道如何在不使用全局变量的情况下工作吗？我在一个干净的vue-cli项目上。

谢谢!

Answer 1

它可以通过将应用程序构建为一个库来实现。

// vite.config.ts

export default defineConfig({
  build: {
    lib: {
      entry: 'path/to/build.ts',
      name: 'ComponentsLib',
      fileName: format => `components-lib.${format}.js`
    }
  }
})