无法在第三方工具 iframe 中预览使用 Vite 开发的 Vue 应用（但可以使用 Vue CLI）

Question

我正在开发一个 Vue 应用程序，它将被“iframed”到第 3 方框架中。我可以在 localhost 下本地开发我的应用程序，但为了在第 3 方工具中预览它，URL 应为：https://localhost:5001/sampleapp/index.html。

我有同一个应用程序的两个版本。第一个是使用 Vue-CLI 构建的，第二个是使用 Vite 构建的。

当我尝试预览应用程序的 Vite 版本时，我看到一个空白页面。

当使用 Vue CLI 版本时，我得到了一个可以工作的应用程序，并且可以像平常一样开发它，并且它在 iframe 中“热重载”。

如何使用 Vite 实现同样的效果？

Answer 1

@edytajordan 的回答：

事实证明，对于 Vite 版本，我实际上必须在预览模式下运行应用程序。我的最终 vite.config.js：

export default defineConfig({
  plugins: [vue()],
  base: '/sampleapp/index.html/',
  server: {
    port: 5001,
    https: true,
  },
  preview: {
    port: 5001,
    https: true,
  }
})

然后运行 ​​npm run build && npm 运行预览。