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

Question

我正在尝试将 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

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

Answer 1

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

main.ts

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

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

为什么要动态导入？

Answer 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

Answer 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"
            ]
        }
    }
})

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

Vue + Vite + Rollup: Dynamic import not works on production build

vue.js

es6-modules

rollup

rollupjs

vite

main.ts