Vue: обновить пути к активам c stati - PullRequest
Новая
       13

Vue: обновить пути к активам c stati

0 голосов
/ 25 мая 2020

У меня Vue v2 SPA. Это стандартное приложение, каким оно может быть. Пусть это будет hello-world из документации . Сделаем и соберем: 

vue create hello-world
cd hello-world
yarn install
yarn build

Но у меня есть требование: приложение должно быть встроено (путем перезаписи URL, а не развертываться) на другой сайт:

Но сборка приложения содержит абсолютные пути для всех ресурсов: 

$ cat dist/index.html

<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....

Ломает перезаписи стороннего сайта. Ресурс app.fb0c6e1c.css будет получен из: 

https://site2.come/css/app.fb0c6e1c.css

Вместо: 

https://site2.come/path-toapp/css/app.fb0c6e1c.css

Как решить проблему? Я не нашел соответствующей конфигурации в документации vue.

Конечно, у меня есть решение. Я могу переписать URL-адреса в сценарии CI с помощью bash: 

sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html

Но приведенное выше решение является взломом и не может поддерживаться веб-разработчиками. Из-за этого я ищу более важное решение (например, на основе веб-пакетов).

1 Ответ

1 голос
/ 25 мая 2020

Вам необходимо создать файл vue.config.js в вашем проекте root и установить параметр publicPath : 

module.exports = {
  publicPath: '/path-toapp/'
}
...