Vue + Vite + Rollup：动态导入不适用于生产构建答案

【问题标题】：Vue + Vite + Rollup: Dynamic import not working on production buildVue + Vite + Rollup：动态导入不适用于生产构建
【发布时间】：2022-07-12 15:47:03
【问题描述】：

我正在尝试将 Vite 与 dynamic-import Vue SFC 一起使用，但它不适用于生产构建。

有stackblitz例子：

https://stackblitz.com/edit/vitejs-vite-ant1g2?file=src/main.ts

测试命令和 localhost:3000 显示良好。

vite

但是预览和 localhost:4173 显示为空白。

vite build && vite preview

怎么了？你有什么解决办法吗？

【问题讨论】：

JS 应用程序通常不会在控制台中“显示空白”而没有任何错误。检查开发工具....
我可以确认此行为并且控制台上没有错误消息。我猜是关于./App.vue 的路径。它没有被解决为生产所需的资产。你检查了`cli.vuejs.org/guide/…吗？
我忘了说控制台里没有任何线索。我对 Vite 和 Rollup 不是很熟悉，所以我不知道如何应用 @Nechoj 的链接。
为什么要动态加载App.vue而不是标准导入？
更多信息：我添加了console.log，发现App.vue的创建周期没有运行。

标签： vue.js es6-modules rollup rollupjs vite

【解决方案1】：

使用标准导入，它可以正常工作：

main.ts

import { createApp } from 'vue'
import App from './App.vue'

console.log('start app')
createApp(App).mount('#app')

为什么要动态导入？

【讨论】：

【解决方案2】：

使用defineAsyncComponent。

https://stackblitz.com/edit/vitejs-vite-pmqny3?file=src/main.ts

import { createApp, defineAsyncComponent } from 'vue';

console.log('start app');
createApp(defineAsyncComponent(() => import('./App.vue'))).mount('#app');

感谢https://misskey.dev/notes/8zjl4hnyz5

【讨论】：

【解决方案3】：

我最近在做一个 PoC，很惊讶地发现 dynamic 导入功能在 dev 模式下工作正常，但在没有特殊配置的情况下在生产构建中失败。这背后的原因（可能）是vite 使用esbuild 作为dev 模式的捆绑器，而使用rollup 作为production 构建的捆绑器。

由于两种模式之间的行为差异，我确保我总是在dev 和production 模式下测试一个新概念，以确保它也适用于production 构建，否则你会结束在dev 模式下开发一个功能，只是在稍后阶段才意识到它在production 模式下不起作用。

您需要在vite.configs.ts 文件的rollupOptions 下列出所有动态导入，以使其在production 模式下工作-

import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        rollupOptions: {
            external: [
                "/path/to/external/module.es.js"
            ]
        }
    }
})

【讨论】：