Развертывание приложения VueJS в подкаталоге

Я испытываю проблемы с развертыванием приложения Vue JS, построенного с использованием CLi Webpack для работы.

при загрузке в корневой каталог все отображается нормально, но внутри подпапки все ссылки ломаются.

Я добавил базовый href:

    <base href="/dist/">

и скрипты загружаются, но все пути активов, созданные Webpack, сломаны, изображения и шрифты не загружаются, поскольку они указывают на корневой каталог.

может кто-нибудь помочь?

9
vue.js vuejs2 webpack

2 ответов

предполагая, что вы используете шаблон webpack из vue-cli, вам нужно отредактировать assetsPublicPath в собственность config / index.js - обратите внимание, что есть один для build и dev

проверить Обработка Статических Активов раздел в документах для получения дополнительной информации.

16

для Vue CLI 3 это довольно просто.

редактировать vue.config.js (если нет, создайте его в корневом каталоге проекта) и добавьте следующие строки:

module.exports = {
  baseUrl: "./"
};

или любой подкаталог, который вы хотите.

вы также можете решить в соответствии с NODE_ENV. Вижу docs.

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}
6