Vue + Vite + Rollup:动态导入不工作于生产构建

Question

我试图在dynamic-import Vue SFCs中使用Vite，但它不适用于生产构建。

这里有stackblitz示例：

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

测试命令和本地主机:3000显示良好。

vite

然而，预览和本地主机:4173显示为空白。

vite build && vite preview

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

Answer 1

使用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 2

我最近做了一个PoC，并且惊讶地知道dynamic导入特性在dev模式下工作良好，但是在没有特殊配置的生产构建中失败。这背后的原因(可能)是vite使用esbuild作为dev模式的绑定器，而使用rollup作为production构建的绑定器。

由于两种模式之间行为上的这种差异，我确保始终在dev和production模式中测试一个新概念，以确保它在production构建中也能工作，否则您最终将在dev模式下开发一个特性，但在稍后阶段才会意识到它在production模式下不起作用。

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

import { defineConfig } from 'vite'

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

Answer 3

对于标准导入，它工作正常，没有问题：

main.ts

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

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

为什么要动态导入？