如何按需创建 Vue3+composition API 应用答案

【问题标题】：How to create Vue3+composition API app on demand如何按需创建 Vue3+composition API 应用
【发布时间】：2022-01-23 20:34:12
【问题描述】：

我有几个 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 项目。

谢谢！

【问题讨论】：

标签： webpack vuejs3 vue-composition-api

【解决方案1】：

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

// vite.config.ts

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

【讨论】：