Блог

Главная - Вопросы по программированию - Изменение каталога активов в Vue

Изменение каталога активов в Vue

#vue.js #vue-cli-3

#vue.js #vue-cli-3

Вопрос:

Я работаю над проектом, который был создан с использованием vue cli 3.0. И при создании также создается src/assets папка. В эту папку могут входить, например, некоторые изображения.

Возможно ли изменить путь к ресурсам на что-то другое?

Я попытался изменить assetsDir настройку в vue.config.js . Но это только изменяет путь вывода в сборке.

Редактировать:

Я должен отметить, что я хотел бы загружать ресурсы на основе переменной окружения «vendor». Итак, если я установлю для этого значение, vendorX оно должно загрузиться src/assets/vendorX и с помощью vendorY оно должно загрузиться src/assets/vendorY .

Правка 2:

Похоже, что имя каталога не имеет значения для командной строки Vue. Я изменил assets название папки на vendors . Но я предполагаю, что Vue по умолчанию включает все файлы ресурсов в src . Так что сейчас я ищу способ изменить это или, может быть, найти другое решение.

Ответ №1:

Если папка ресурсов была настроена с псевдонимом, это было бы найдено в webpack.config , однако vue-cli, похоже, создает проект с жестко заданными путями к ресурсам. Попробуйте изменить src путь для ваших ресурсов во всех файлах на ./assetsDir/myImg.png .

Комментарии:

1. Вы имеете в виду переименование папки ресурсов? Или вы имеете в виду изменение ссылок с @/assets/...... на @/assetsDir/..... . Я попробовал последнее предложение, но это выдает ошибку компиляции the dependency was not found .

Ответ №2:

Вот как получить доступ к ресурсу в произвольной папке из ваших файлов Vue SFC / template, используя псевдоним webpack.

Предположим, у вас есть следующая строка в каком-нибудь вашем SFC:

 <!-- I would like to access the logo that is located at the  -->
<!-- "project root/public/assets/images/" -->
<img alt="Vue logo" src="@public/assets/images/logo.png" />

Тогда в вашем vue.config.js есть следующий код:

 const { defineConfig } = require('@vue/cli-service');
const path = require('path');

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        resolve: {
            alias: {
                '@src': path.join(__dirname, 'src'),
                '@public': path.join(__dirname, 'public')
            }
        }
    }
})

alias Ключ — это то место, где вы настраиваете псевдонимы. Подробную информацию о конфигурации веб-пакета Vue CLI смотрите в его официальных документах.

Определенные здесь псевдонимы также могут быть использованы из ваших файлов JS.