Vite построен в соответствующей папке dist
Я начал использовать Vite, и в разработке все работает нормально, но при сборке
ничего не отображается, потому что он построен в корне /, что является проблемой, потому что я хочу развернуть его на сервере, как в https://example.com/iframes/app, чтобы затем использовать iframe для доступа к этому URL-адресу.
Поэтому я изменил vite.confi.js на
base: './', // This will ensure that paths are relative to the current directory
build: {
outDir: 'dist',
assetsDir: 'assets',
},
Это работает для всего, кроме всех ресурсов, которые были на public, на dev все нормально, но при сборке браузер ищет их на корневом уровне сервера.
`https://example.com/asset-on-public.svg`
вместо желаемого
`https://example.com/iframes/app/asset-on-public.svg`
Есть идеи?
Спасибо, это именно то, что я использовал / перед публикацией ресурса, пожалуйста, укажите это как ответ, я приму его
Вы уверены, что делаете именно это? Это означает, что у вас есть функция url(), которую вы вызываете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Как указано, URL-адрес base должен быть './', если вы хотите «встроенное развертывание», т. е. чтобы Vite использовал относительные URL-адреса.
Если вы хотите, чтобы Vite упаковывал, преобразовывал и т. д. ваши ресурсы, вам необходимо импортировать их (по умолчанию они превратятся в строки URL), например:
import closeSvg from './close.svg';
function CloseButton() {
return <img src = {closeSvg} />;
}
function CloseBackgroundDiv() {
return <div style = {{backgroundImage: `url(${closeSvg})`}} />;
}
У меня та же проблема с '' или './'
Спасибо, но тогда не нужно импортировать этот 'style = {{backgroundImage: url('close.svg') }}' работает отлично, я использую галочки вокруг URL-адреса, но stackoverflow использует его как параметр формата
измените базу в файле конфигурации vite, а затем попробуйте запустить сборку npm run или Yarn run build.
export default defineConfig({
plugins: [react()],
base: "./",
});
Затем в терминале (если вы используете npm)
npm run build
Эта проблема возникает из-за того, что база папки dist указана неправильно, поэтому просто попробуйте изменить базу в файле конфигурации vite.
Как вы ссылаетесь на
asset-on-public.svgв своем коде? Где он находится в вашей исходной иерархии?