Динамический publicPath при рендеринге страниц с помощью Vue SSR - PullRequest
0 голосов
/ 13 сентября 2018

Мы рады пользователям Vue и его серверного модуля рендеринга Vue SSR. Одним из требований моего проекта является то, что мы можем динамически настраивать publicPath Webpack во время выполнения, чтобы мы могли получать ресурсы из наших различных CDN (у нас есть два, один для теста и один для продукта).

Мы можем легко выполнить это на стороне клиента, используя __webpack_public_path__ свободную переменную , и вы также можете переопределить publicPath в манифесте клиента SSR для URL-адресов активов впрыскивается в <head>.

Тем не менее, у нас продолжают возникать проблемы с URL-адресами активов, которые размещаются непосредственно в наших шаблонах и обрабатываются SSR. Например, представьте, что у нас есть следующее изображение в нашем теге:

<img src="~@/test.png" />

Наша цель состоит в том, чтобы как на сервере, так и на клиенте мы могли настроить этот URL-адрес так, чтобы он начинался с префикса так, как нам нравится через publicPath. Похоже, что не существует способа динамического обновления publicPath после того, как vue-ssr-server-manifest.json был сгенерирован, в результате получающийся URL-адрес в конечном итоге становится чем-то относительным, например /static/test.png или чем-то, что мы первоначально цитировали в нашей конфигурации Webpack.

Из-за ограничений нашего проекта невозможно перестроить наш пакет SSR, поэтому мы должны сделать это во время выполнения. Мы попытались добавить значения заполнителей в качестве нашего publicPath, например, __CUSTOM_WEBPACK_PUBLIC_PATH__ и замена их в комплекте серверов во время выполнения, но в итоге это становится неэффективным, поскольку publicPath также встроен в другие файлы, созданные Webpack.

Интересно, есть ли более чистый способ достижения того, что нам нужно, напрямую через Vue SSR, или это то, что мы просто не можем настроить во время выполнения. Спасибо за чтение!

1 Ответ

0 голосов
/ 05 мая 2019

Позднее наблюдение, но мы в конечном итоге решили эту проблему.

Мы обнаружили, что глобальная настройка __webpack_public_path__ в нашем процессе Node.js привела к тому, что к нашим ресурсам в нашем наборе серверов был применен правильный публичный путь.

Как только этот глобальный элемент присутствует как в окне (например, на стороне клиента), так и глобально в процессе узла (например, на стороне сервера), все начинает работать так, как мы хотели.

...