Невозможно предварительно просмотреть приложение Vue, разработанное с помощью Vite, в iframe стороннего инструмента (но можно с помощью Vue CLI)
Я разрабатываю приложение Vue, которое будет «iframe» в стороннюю структуру. Я могу разработать свое приложение локально под локальным хостом, но для предварительного просмотра в стороннем инструменте URL-адрес должен быть: https://localhost:5001/sampleapp/index.html.
У меня две версии одного и того же приложения. Один был построен с помощью Vue-CLI, а второй — с Vite.
Когда я пытаюсь просмотреть версию приложения Vite, я получаю пустую страницу.
При использовании версии Vue CLI я получаю работающее приложение и могу разрабатывать его, как обычно, и оно «горячо перезагружается» в iframe.
Как мне добиться того же с Vite?
@ tony19 - я понял, в чем проблема (а также обновил содержание вопроса). Оказалось, что для версии Vite мне действительно пришлось запускать режим предварительного просмотра. Когда я сравнивал исходный код фрейма, Vue-CLI создавал обычный минимизированный файл JavaScript. Вите дарил <script type = "module" src = "/sampleapp/index.html/@vite/client"</script>. Однажды в режиме предварительного просмотра приложение работало под URL-адресом iframe.
Рад, что ты это понял! Пожалуйста, переместите свой ответ в поле для ответов. Не стесняйтесь принимать свой собственный ответ. Это поможет другим, столкнувшимся с той же проблемой.
Я бы переместил его, но я ограничен переполнением стека. Недостаточно очков репутации.
Попался. Я переместил его для вас.
Ответы 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 run preview.
Инструмент — Amadeus Enterprise. Они требуют, чтобы URL-адрес сети был:
https://localhost:5001/. Я могу получить это с Vue CLI, но не с Vite.