Как настроить пути для файлов по типу publicPath?

Question

[SvinkaBacilka]

Есть приложение которое развернуто не в корне домена и имеет следующую настройку в vue.confi.js:

publicPath: process.env.NODE_ENV === 'production'
    ? '/subpath/'
    : '/'

Как мне обращаться к файлам по относительному пути которые лежат в папке public учитываю '/subpath/' где развёрнуто приложение?

Answer 1

[SvinkaBacilka]

Решил я эту проблему следующим образом:
Поскольку Webpack, что под капотом у vue-cli, никак не обрабатывает данные в папке public а просто их копирует, то пришлось явно бращаться к переменной publicPath из скрипта:
`${process.env.BASE_URL}path/you/need/file/png`

Answer 2

[bubaley]

Здравствуйте

outputDir: '../static/dist',
publicPath: process.env.NODE_ENV === 'production'
    ? '/static/dist/'
    : '/',
indexPath: process.env.NODE_ENV === 'production'
    ? '../../templates/index.html'
    : 'index.html',

С помощью такого функционала, Вы можете настроить места куда собирается build.
outputDir - Указывает директорию в которую собирать проект.
publicPath - Добавляет префикс в index.html откуда забирать файлы.
indexPath - место где будет лежать index.html.

Comments

[SvinkaBacilka]

bubaley Не совсем ясно как это поможет при обращении к файлам из папки public.
Проблема в том что при указании пути к файлам игнорируется publicPath и для сборки нужно дописывать в начало пути подкаталог по типу /subpath/

[bubaley]

А у вас просто vue cli или вместе с back framework?

[SvinkaBacilka]

bubaley, просто vue-cli-3

[SvinkaBacilka]

bubaley, интересно то что если указать относительный путь (то есть ./subFolder/folder/image.png ) то этот путь прикрепляется к адресу URL а не к папке которую мы указывали в publicPath

[bubaley]

Суть в чем, по стандарту, если мне память не изменяет, то при сборке проекта, в public кладутся index.html и папка dist с js и css.
Поэтому в vue.config.js мы должны добавить
publicPath: process.env.NODE_ENV === 'production'
? 'dist/'
: '/',
Это штука в index.html добавит в префиксы (к js и css файлам ) 'dist/' чтобы получилось 'dist/index.js' и 'dist/index.css'.

Если мы хотим изменить папку куда собирать проект, то есть не ходим чтобы они лежали в папке public/dist
Тогда мы изменяем outputDir и указываем директорию, куда нужно положить статик файлы. Но тогда и в publicPath мы должны показать, где искать статику, относительно index.html.
Также для удобства, можем изменить indexPath, чтобы сказать, куда положить index.html
Тогда в publicPath добавляем префикс относительно нового index.html

Я думаю довольно понятно объяснил)
По поводу "не в корне домена" попробуйте в publicPath убрать первый слеш, тогда он вроде будет брать файлы относительно index.html

[SvinkaBacilka]

bubaley, стало только непонятней)
в public папке лежит index.html но до сборки, после сборки от попадает в dist.
по сути всё содержимое папки public собирается в dist
менять папку для сборки мне не нужно, меня устраивает стандартная (то есть dist)

Проблема остаётся в том что при навигации vue-router учитывает publicPath и работает нормально, но если я буду из скриптов писать путь ('/folder/') то они будут идти в корень сайта, а при использавании относительных путей то они будут просто добавляться к существующему урл что не правильно

И если в publicPath убрать первый слеш то проект не запуститься

[SvinkaBacilka]

bubaley, если кратно то проблема в том чтобы к статическим путям к изображению добавлять автоматически publicPath после сборки
чтобы я просто создал папку с изображениями на сервере и менял их в зависимости от требований через конфиг в json

[bubaley]

SvinkaBacilka, А Вы на чем публикуете, своя машина , vps, или размещаете на хостинге, если да, то на каком. И какой там web-сервер nginx или apache?

[SvinkaBacilka]

bubaley, На хостинге, там веб сервер apache
Какой хостинг не знаю, по ftp с ним только работаю