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

I am developing a Vue app that will be "iframed" into a 3rd party framework. I can develop my app locally under the localhost, but in order to preview it in the 3rd party tool, the URL should be: https://localhost:5001/sampleapp/index.html.

I have two versions of the same app. One was built with Vue-CLI and the 2nd one with Vite.

When I try to preview the Vite version of the app, I get a blank page.

When using Vue CLI version, I get a working app and can develop it as I would normally do, and it 'hot-reloads' in the iframe.

How do I achieve the same with Vite?

CodePudding user response：

@edytajordan's answer:

It turned out, that for the Vite version, I actually had to run the App in the preview mode. My final vite.config.js:

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

and then run npm run build && npm run preview.