#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.