Как заставить rspack/rsbuild использовать относительные пути?
Я создал новое приложение React, используя rspack, на основе документации, которую я использовал с помощью команды npm create rsbuild@latest.
Я развернул сборку на страницах Github, к сожалению, страница пуста. Кажется, он не может импортировать необходимые файлы.
Я посмотрел сгенерированный код .html.
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script defer src = "/static/js/lib-react.66d7bffd.js"></script><script defer src = "/static/js/234.7da32f54.js"></script><script defer src = "/static/js/index.0006388e.js"></script>
<link href = "/static/css/index.ff669eb5.css" rel = "stylesheet">
</head>
<body>
<div id = "root"></div>
</body>
</html>
и я думаю, что пути должны быть относительными. Когда я добавляю . к каждому пути, все работает как положено.
Как заставить rspack/rsbuild использовать относительные пути?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я не очень хорошо знаю RSBuild,
но я думаю, что вы можете написать сценарий, который читает каждый файл и делает все пути относительными...
Поставь лайк relativify.js и запусти его через узел, который ищет каждый файл в твоей папке dist...
На самом деле этот вопрос следует перевести так: Как я могу использовать rsbuild для публикации страницы на странице GitHub и обеспечения ее правильной работы?
Основная причина вашего описания «невозможно импортировать необходимые файлы» заключается в том, что путь не совпадает. Причина всего этого в том, что страницы GitHub автоматически добавляют дополнительный вторичный путь на основе имени репозитория.
Например, если мое имя на Github — GrinZero, то мое доменное имя — https://grinzero.github.io. И мои страницы GitHub для каждого репозитория будут начинаться с этого имени домена и использовать имя репозитория в качестве вторичного пути.
Например, у меня есть два репозитория, использующих страницы GitHub, а именно node-network-devtools и magic-design-react. Итак, пути доступа к их страницам GitHub:
Вообще говоря, когда мы инициализируем проект, будь то Vite, Webpack или RSpack, по умолчанию вторичных путей нет. То есть, пока мы добавляем вторичный путь, проблема будет решена.
Так как же его добавить? В Vite для его изменения можно использовать атрибут base. А для rspack, согласно полученной мной информации, его можно установить через output.publicPath.
Например, если имя моего репозитория — magic-design-react, то publicPath должен быть /magic-design-react/, а база — /magic-design-react.
Попробуй это:
// rsbuild.config.ts
import { pluginReact } from '@rsbuild/plugin-react';
export default defineConfig({
plugins: [pluginReact()],
+ output: {
+ assetPrefix: './'
+ }
});
Я создал новый проект и новую сборку. Распространение работает локально, но когда я пытаюсь
npx http-serve, у меня возникает та же проблема. Мне нужны только относительные пути, чтобы это исправить. Я попробовалoutput.publicPath = '.', но это не помогло. Когда я развертываю проекты Vite, все эти проекты имеютbase = '.', и это работает нормально.