如何按需创建Vue3+composition API app

Question

我有几个 Vue2 应用程序，我计划将其重写为 Vue3+组合 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`
    }
  }
})

如何按需创建Vue3+composition API app

How to create Vue3+composition API app on demand

webpack

vuejs3

vue-composition-api