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

Question

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

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

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

当使用 Vue CLI 版本时，我得到了一个可用的应用程序并且可以像往常一样开发它，并且它 'hot-reloads' 在 iframe 中。

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

Answer 1

@edytajordan 的回答：

原来，对于 Vite 版本，我实际上必须运行 App 处于预览模式。我的决赛 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 run preview.

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

Can't preview Vue app developed with Vite in a 3rd party tool iframe (but can using Vue CLI)

port

proxy

config

vue.js

vite